@panneau/core 1.0.4 → 1.1.0

package/es/contexts.js

@@ -13,10 +13,11 @@ 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';
+import EventEmitter from 'wolfy87-eventemitter';
 
 var MODALS_NAMESPACE = 'modals';
 var FIELDS_NAMESPACE = 'fields';
@@ -24,6 +25,7 @@ var FORMS_NAMESPACE = 'forms';
 var FILTERS_NAMESPACE = 'filters';
 var LISTS_NAMESPACE = 'lists';
 var DISPLAYS_NAMESPACE = 'displays';
+var PAGES_NAMESPACE = 'pages';
 var APP_NAMESPACE = 'app';
 var ComponentsContext = /*#__PURE__*/React.createContext(null);
 
@@ -146,6 +148,21 @@ var useDisplayComponent = function useDisplayComponent(name) {
   return useComponent(name, defaultComponent, DISPLAYS_NAMESPACE);
 };
 
+/**
+ * Pages hooks
+ */
+var usePagesComponentsManager = function usePagesComponentsManager() {
+  return useComponentsManager(PAGES_NAMESPACE);
+};
+var usePagesComponents = function usePagesComponents() {
+  var defaultComponents = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return useComponents(PAGES_NAMESPACE, defaultComponents);
+};
+var usePageComponent = function usePageComponent(name) {
+  var defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  return useComponent(name, defaultComponent, PAGES_NAMESPACE);
+};
+
 /**
  * App hooks
  */
@@ -231,13 +248,13 @@ var toggle = PropTypes.shape({
   label: PropTypes.string
 });
 PropTypes.arrayOf(toggle);
-var tableColumn = PropTypes.shape({
+var tableColumn = PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
   id: PropTypes.string,
   component: PropTypes.string,
   path: PropTypes.string,
   field: PropTypes.string,
   columnClassName: PropTypes.string
-});
+})]);
 PropTypes.arrayOf(tableColumn);
 
 /**
@@ -1022,33 +1039,34 @@ 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,
         pathname = _ref$pathname === void 0 ? null : _ref$pathname,
         _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 = {
@@ -1106,6 +1124,40 @@ var TrackingProvider = function TrackingProvider(_ref) {
 TrackingProvider.propTypes = propTypes$1;
 TrackingProvider.defaultProps = defaultProps$1;
 
+/**
+ * Locale loader
+ */
+var loaders = {};
+var events = new EventEmitter();
+function loadPackage(name, loader) {
+  if (typeof loaders[name] === 'undefined') {
+    loaders[name] = {
+      loader: loader().then(function (response) {
+        loaders[name].loader = null;
+        loaders[name].loaded = true;
+        loaders[name].resource = response;
+        events.emit("loaded:".concat(name), response);
+        return response;
+      }),
+      loaded: false,
+      resource: null
+    };
+  }
+  return new Promise(function (resolve) {
+    var _ref = loaders[name] || {},
+      _ref$loaded = _ref.loaded,
+      loaded = _ref$loaded === void 0 ? false : _ref$loaded,
+      resource = _ref.resource;
+    if (loaded === true) {
+      resolve(resource);
+    } else {
+      events.once("loaded:".concat(name), function (response) {
+        resolve(response);
+      });
+    }
+  });
+}
+
 /**
  * Locale loader
  */
@@ -1125,7 +1177,9 @@ var useUppyCore = function useUppyCore() {
         canceled = true;
       };
     }
-    import('@uppy/core').then(function (_ref) {
+    loadPackage('@uppy/core', function () {
+      return import('@uppy/core');
+    }).then(function (_ref) {
       var Uppy = _ref["default"];
       packageCache = Uppy;
       if (!canceled) {
@@ -1147,10 +1201,14 @@ var useUppyCore = function useUppyCore() {
 var packagesCache$2 = {};
 var defaultPackagesMap$2 = {
   fr: function fr() {
-    return import('@uppy/locales/lib/fr_FR');
+    return loadPackage('@uppy/locales/lib/fr_FR', function () {
+      return import('@uppy/locales/lib/fr_FR');
+    });
   },
   en: function en() {
-    return import('@uppy/locales/lib/en_US');
+    return loadPackage('@uppy/locales/lib/en_US', function () {
+      return import('@uppy/locales/lib/en_US');
+    });
   }
 };
 var useUppyLocale = function useUppyLocale(locale) {
@@ -1195,19 +1253,29 @@ var _excluded$2 = ["default"];
 var packagesCache$1 = {};
 var defaultPackagesMap$1 = {
   webcam: function webcam() {
-    return import('@uppy/webcam');
+    return loadPackage('@uppy/webcam', function () {
+      return import('@uppy/webcam');
+    });
   },
   facebook: function facebook() {
-    return import('@uppy/facebook');
+    return loadPackage('@uppy/facebook', function () {
+      return import('@uppy/facebook');
+    });
   },
   instagram: function instagram() {
-    return import('@uppy/instagram');
+    return loadPackage('@uppy/instagram', function () {
+      return import('@uppy/instagram');
+    });
   },
   dropbox: function dropbox() {
-    return import('@uppy/dropbox');
+    return loadPackage('@uppy/dropbox', function () {
+      return import('@uppy/dropbox');
+    });
   },
   'google-drive': function googleDrive() {
-    return import('@uppy/google-drive');
+    return loadPackage('@uppy/google-drive', function () {
+      return import('@uppy/google-drive');
+    });
   }
 };
 var useUppySources = function useUppySources(sources) {
@@ -1281,13 +1349,19 @@ var _excluded$1 = ["default"];
 var packagesCache = {};
 var defaultPackagesMap = {
   transloadit: function transloadit() {
-    return import('@uppy/transloadit');
+    return loadPackage('@uppy/transloadit', function () {
+      return import('@uppy/transloadit');
+    });
   },
   tus: function tus() {
-    return import('@uppy/tus');
+    return loadPackage('@uppy/tus', function () {
+      return import('@uppy/tus');
+    });
   },
   xhr: function xhr() {
-    return import('@uppy/xhr-upload');
+    return loadPackage('@uppy/xhr-upload', function () {
+      return import('@uppy/xhr-upload');
+    });
   }
 };
 var useUppyTransport = function useUppyTransport(transport) {
@@ -1623,4 +1697,4 @@ var UppyProvider = function UppyProvider(_ref5) {
 UppyProvider.propTypes = propTypes;
 UppyProvider.defaultProps = defaultProps;
 
-export { APP_NAMESPACE, ComponentsContext, ComponentsProvider, DISPLAYS_NAMESPACE, DefinitionProvider, FIELDS_NAMESPACE, FILTERS_NAMESPACE, FORMS_NAMESPACE, FieldsContext, FieldsProvider, FontsContext, FontsProvider, FormProvider, GoogleApiClientContext, GoogleApiClientProvider, GoogleKeysContext, GoogleKeysProvider, GoogleMapsClientContext, GoogleMapsClientProvider, LISTS_NAMESPACE, LocalesContext, LocalesProvider, MODALS_NAMESPACE, ModalsContext, ModalsProvider, PanelsContext, PanelsProvider, PanneauProvider, ResourceProvider, RoutesContext, RoutesProvider, TrackingProvider, UppyContext, UppyProvider, useAppComponent, useAppComponents, useAppComponentsManager, useComponent, useComponents, useComponentsManager, useDefinition, useDefinitionContext, useDisplayComponent, useDisplaysComponents, useDisplaysComponentsManager, useField, useFieldComponent, useFields, useFieldsComponents, useFieldsComponentsManager, useFieldsManager, useFilterComponent, useFiltersComponents, useFiltersComponentsManager, useFonts, useForm, useFormComponent, useFormSetValue, useFormValue, useFormsComponents, useFormsComponentsManager, useGoogleApiClient, useGoogleFonts, useGoogleKeys, useGoogleMapsClient, useListComponent, useListsComponents, useListsComponentsManager, useLocales, useModalComponent, useModals, useModalsComponents, useModalsComponentsManager, useOtherLocales, usePanels, usePanneau, usePanneauAuth, usePanneauColorScheme, usePanneauComponent, usePanneauComponents, usePanneauResource, usePanneauResources, usePanneauSettings, useResource, useRouteBack, useRoutePush, useRoutes, useTracking, useUppy, useUrlGenerator, withGoogleApiClient, withGoogleMapsClient, withModals, withPanels };
+export { APP_NAMESPACE, ComponentsContext, ComponentsProvider, DISPLAYS_NAMESPACE, DefinitionProvider, FIELDS_NAMESPACE, FILTERS_NAMESPACE, FORMS_NAMESPACE, FieldsContext, FieldsProvider, FontsContext, FontsProvider, FormProvider, GoogleApiClientContext, GoogleApiClientProvider, GoogleKeysContext, GoogleKeysProvider, GoogleMapsClientContext, GoogleMapsClientProvider, LISTS_NAMESPACE, LocalesContext, LocalesProvider, MODALS_NAMESPACE, ModalsContext, ModalsProvider, PAGES_NAMESPACE, PanelsContext, PanelsProvider, PanneauProvider, ResourceProvider, RoutesContext, RoutesProvider, TrackingProvider, UppyContext, UppyProvider, useAppComponent, useAppComponents, useAppComponentsManager, useComponent, useComponents, useComponentsManager, useDefinition, useDefinitionContext, useDisplayComponent, useDisplaysComponents, useDisplaysComponentsManager, useField, useFieldComponent, useFields, useFieldsComponents, useFieldsComponentsManager, useFieldsManager, useFilterComponent, useFiltersComponents, useFiltersComponentsManager, useFonts, useForm, useFormComponent, useFormSetValue, useFormValue, useFormsComponents, useFormsComponentsManager, useGoogleApiClient, useGoogleFonts, useGoogleKeys, useGoogleMapsClient, useListComponent, useListsComponents, useListsComponentsManager, useLocales, useModalComponent, useModals, useModalsComponents, useModalsComponentsManager, useOtherLocales, usePageComponent, usePagesComponents, usePagesComponentsManager, usePanels, usePanneau, usePanneauAuth, usePanneauColorScheme, usePanneauComponent, usePanneauComponents, usePanneauResource, usePanneauResources, usePanneauSettings, useResource, useRouteBack, useRoutePush, useRoutes, useTracking, useUppy, useUrlGenerator, withGoogleApiClient, withGoogleMapsClient, withModals, withPanels };

package/es/hooks.js

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import isString from 'lodash/isString';
 import dayjs from 'dayjs';
 import { EventsManager, MediasParser } from '@panneau/core';
-import { createUseEvent } from '@panneau/core/utils';
+import { createUseEvent, loadPackage } from '@panneau/core/utils';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -565,7 +565,9 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
     }, null);
     var hasConfig = config !== null;
     if (hasConfig && typeof window !== 'undefined') {
-      import('webfontloader').then(function (_ref2) {
+      loadPackage('webfontloader', function () {
+        return import('webfontloader');
+      }).then(function (_ref2) {
         var WebFont = _ref2["default"];
         return WebFont.load(_objectSpread(_objectSpread({}, config), {}, {
           timeout: 3000,

package/es/index.js

@@ -63,13 +63,13 @@ var toggle = PropTypes$1.shape({
   label: PropTypes$1.string
 });
 var toggles = PropTypes$1.arrayOf(toggle);
-var tableColumn = PropTypes$1.shape({
+var tableColumn = PropTypes$1.oneOfType([PropTypes$1.string, 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);
 
 /**
@@ -228,6 +228,8 @@ var getComponentFromName = function getComponentFromName() {
   return component;
 };
 
+new EventEmitter();
+
 var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
   _inherits(ComponentsManager, _EventEmitter);
   var _super = _createSuper(ComponentsManager);

package/es/utils.js

@@ -13,6 +13,7 @@ import isArray from 'lodash/isArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import get from 'lodash/get';
 import capitalize from 'lodash/capitalize';
+import EventEmitter from 'wolfy87-eventemitter';
 import slugify from 'slugify';
 
 var convertStyleToString = function convertStyleToString(style) {
@@ -78,7 +79,7 @@ var getComponent = function getComponent(component) {
   };
 };
 
-var _excluded = ["field"];
+var _excluded = ["id", "field"];
 var getColumnFromField = function getColumnFromField(field) {
   if (field === null) {
     return null;
@@ -109,12 +110,17 @@ var getColumnsWithFields = function getColumnsWithFields(resource, columns) {
     var _ref = isString(column) ? {
         field: column
       } : column,
+      _ref$id = _ref.id,
+      colId = _ref$id === void 0 ? null : _ref$id,
       _ref$field = _ref.field,
-      fieldName = _ref$field === void 0 ? null : _ref$field,
+      colField = _ref$field === void 0 ? null : _ref$field,
       otherProps = _objectWithoutProperties(_ref, _excluded);
-    return _objectSpread(_objectSpread({}, fieldName !== null ? getColumnFromField(fields.find(function (it) {
+    var fieldName = colField || colId;
+    return _objectSpread(_objectSpread(_objectSpread({}, fieldName !== null ? getColumnFromField(fields.find(function (it) {
       return it.name === fieldName;
-    }) || null) : null), otherProps);
+    }) || null) : null), otherProps), {}, {
+      id: colId
+    });
   }).filter(function (it) {
     return it !== null;
   }) : [];
@@ -249,6 +255,40 @@ var isMessage = function isMessage(message) {
   return isObject(message) && typeof message.defaultMessage !== 'undefined';
 };
 
+/**
+ * Locale loader
+ */
+var loaders = {};
+var events = new EventEmitter();
+function loadPackage(name, loader) {
+  if (typeof loaders[name] === 'undefined') {
+    loaders[name] = {
+      loader: loader().then(function (response) {
+        loaders[name].loader = null;
+        loaders[name].loaded = true;
+        loaders[name].resource = response;
+        events.emit("loaded:".concat(name), response);
+        return response;
+      }),
+      loaded: false,
+      resource: null
+    };
+  }
+  return new Promise(function (resolve) {
+    var _ref = loaders[name] || {},
+      _ref$loaded = _ref.loaded,
+      loaded = _ref$loaded === void 0 ? false : _ref$loaded,
+      resource = _ref.resource;
+    if (loaded === true) {
+      resolve(resource);
+    } else {
+      events.once("loaded:".concat(name), function (response) {
+        resolve(response);
+      });
+    }
+  });
+}
+
 var setValue = function setValue(value, keyParts, fieldValue) {
   var key = keyParts.shift();
   var isArray = key.match(/^[0-9]+$/) !== null;
@@ -289,4 +329,4 @@ var validateFields = function validateFields(fields, value) {
   }, true);
 };
 
-export { convertStyleToString, createNullableOnChange, createUseEvent, flattenComponents, getColumnsWithFields, getComponent, getComponentFromName, getDefinitionFromId, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getPathValue, getSelectOptions, isMessage, setValue as setFieldValue, slug, validateFields };
+export { convertStyleToString, createNullableOnChange, createUseEvent, flattenComponents, getColumnsWithFields, getComponent, getComponentFromName, getDefinitionFromId, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getPathValue, getSelectOptions, isMessage, loadPackage, setValue as setFieldValue, slug, validateFields };

package/lib/contexts.js

@@ -20,6 +20,7 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var reactRouter = require('react-router');
 var tracking = require('@folklore/tracking');
 var uuid = require('uuid');
+var EventEmitter = require('wolfy87-eventemitter');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -51,6 +52,7 @@ var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
 
 var MODALS_NAMESPACE = 'modals';
 var FIELDS_NAMESPACE = 'fields';
@@ -58,6 +60,7 @@ var FORMS_NAMESPACE = 'forms';
 var FILTERS_NAMESPACE = 'filters';
 var LISTS_NAMESPACE = 'lists';
 var DISPLAYS_NAMESPACE = 'displays';
+var PAGES_NAMESPACE = 'pages';
 var APP_NAMESPACE = 'app';
 var ComponentsContext = /*#__PURE__*/React__default["default"].createContext(null);
 
@@ -180,6 +183,21 @@ var useDisplayComponent = function useDisplayComponent(name) {
   return useComponent(name, defaultComponent, DISPLAYS_NAMESPACE);
 };
 
+/**
+ * Pages hooks
+ */
+var usePagesComponentsManager = function usePagesComponentsManager() {
+  return useComponentsManager(PAGES_NAMESPACE);
+};
+var usePagesComponents = function usePagesComponents() {
+  var defaultComponents = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return useComponents(PAGES_NAMESPACE, defaultComponents);
+};
+var usePageComponent = function usePageComponent(name) {
+  var defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  return useComponent(name, defaultComponent, PAGES_NAMESPACE);
+};
+
 /**
  * App hooks
  */
@@ -265,13 +283,13 @@ var toggle = PropTypes__default["default"].shape({
   label: PropTypes__default["default"].string
 });
 PropTypes__default["default"].arrayOf(toggle);
-var tableColumn = PropTypes__default["default"].shape({
+var tableColumn = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
   id: PropTypes__default["default"].string,
   component: PropTypes__default["default"].string,
   path: PropTypes__default["default"].string,
   field: PropTypes__default["default"].string,
   columnClassName: PropTypes__default["default"].string
-});
+})]);
 PropTypes__default["default"].arrayOf(tableColumn);
 
 /**
@@ -1056,33 +1074,34 @@ var useUrlGenerator = function useUrlGenerator() {
 };
 var useRoutePush = function useRoutePush() {
   var url = useUrlGenerator();
-  var history = reactRouter.useHistory();
+  var navigate = reactRouter.useNavigate();
   var push = React.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__default["default"](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,
         pathname = _ref$pathname === void 0 ? null : _ref$pathname,
         _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 = reactRouter.useHistory();
+  var navigate = reactRouter.useNavigate();
   var back = React.useCallback(function () {
-    return history.goBack();
-  }, [history, url]);
+    return navigate(-1);
+  }, [navigate, url]);
   return back;
 };
 var propTypes$2 = {
@@ -1140,6 +1159,40 @@ var TrackingProvider = function TrackingProvider(_ref) {
 TrackingProvider.propTypes = propTypes$1;
 TrackingProvider.defaultProps = defaultProps$1;
 
+/**
+ * Locale loader
+ */
+var loaders = {};
+var events = new EventEmitter__default["default"]();
+function loadPackage(name, loader) {
+  if (typeof loaders[name] === 'undefined') {
+    loaders[name] = {
+      loader: loader().then(function (response) {
+        loaders[name].loader = null;
+        loaders[name].loaded = true;
+        loaders[name].resource = response;
+        events.emit("loaded:".concat(name), response);
+        return response;
+      }),
+      loaded: false,
+      resource: null
+    };
+  }
+  return new Promise(function (resolve) {
+    var _ref = loaders[name] || {},
+      _ref$loaded = _ref.loaded,
+      loaded = _ref$loaded === void 0 ? false : _ref$loaded,
+      resource = _ref.resource;
+    if (loaded === true) {
+      resolve(resource);
+    } else {
+      events.once("loaded:".concat(name), function (response) {
+        resolve(response);
+      });
+    }
+  });
+}
+
 /**
  * Locale loader
  */
@@ -1159,7 +1212,9 @@ var useUppyCore = function useUppyCore() {
         canceled = true;
       };
     }
-    Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/core')); }).then(function (_ref) {
+    loadPackage('@uppy/core', function () {
+      return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/core')); });
+    }).then(function (_ref) {
       var Uppy = _ref["default"];
       packageCache = Uppy;
       if (!canceled) {
@@ -1181,10 +1236,14 @@ var useUppyCore = function useUppyCore() {
 var packagesCache$2 = {};
 var defaultPackagesMap$2 = {
   fr: function fr() {
-    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/locales/lib/fr_FR')); });
+    return loadPackage('@uppy/locales/lib/fr_FR', function () {
+      return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/locales/lib/fr_FR')); });
+    });
   },
   en: function en() {
-    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/locales/lib/en_US')); });
+    return loadPackage('@uppy/locales/lib/en_US', function () {
+      return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/locales/lib/en_US')); });
+    });
   }
 };
 var useUppyLocale = function useUppyLocale(locale) {
@@ -1229,19 +1288,29 @@ var _excluded$2 = ["default"];
 var packagesCache$1 = {};
 var defaultPackagesMap$1 = {
   webcam: function webcam() {
-    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/webcam')); });
+    return loadPackage('@uppy/webcam', function () {
+      return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/webcam')); });
+    });
   },
   facebook: function facebook() {
-    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/facebook')); });
+    return loadPackage('@uppy/facebook', function () {
+      return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/facebook')); });
+    });
   },
   instagram: function instagram() {
-    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/instagram')); });
+    return loadPackage('@uppy/instagram', function () {
+      return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/instagram')); });
+    });
   },
   dropbox: function dropbox() {
-    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/dropbox')); });
+    return loadPackage('@uppy/dropbox', function () {
+      return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/dropbox')); });
+    });
   },
   'google-drive': function googleDrive() {
-    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/google-drive')); });
+    return loadPackage('@uppy/google-drive', function () {
+      return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/google-drive')); });
+    });
   }
 };
 var useUppySources = function useUppySources(sources) {
@@ -1315,13 +1384,19 @@ var _excluded$1 = ["default"];
 var packagesCache = {};
 var defaultPackagesMap = {
   transloadit: function transloadit() {
-    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/transloadit')); });
+    return loadPackage('@uppy/transloadit', function () {
+      return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/transloadit')); });
+    });
   },
   tus: function tus() {
-    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/tus')); });
+    return loadPackage('@uppy/tus', function () {
+      return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/tus')); });
+    });
   },
   xhr: function xhr() {
-    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/xhr-upload')); });
+    return loadPackage('@uppy/xhr-upload', function () {
+      return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/xhr-upload')); });
+    });
   }
 };
 var useUppyTransport = function useUppyTransport(transport) {
@@ -1686,6 +1761,7 @@ exports.LocalesProvider = LocalesProvider;
 exports.MODALS_NAMESPACE = MODALS_NAMESPACE;
 exports.ModalsContext = ModalsContext;
 exports.ModalsProvider = ModalsProvider;
+exports.PAGES_NAMESPACE = PAGES_NAMESPACE;
 exports.PanelsContext = PanelsContext;
 exports.PanelsProvider = PanelsProvider;
 exports.PanneauProvider = PanneauProvider;
@@ -1735,6 +1811,9 @@ exports.useModals = useModals;
 exports.useModalsComponents = useModalsComponents;
 exports.useModalsComponentsManager = useModalsComponentsManager;
 exports.useOtherLocales = useOtherLocales;
+exports.usePageComponent = usePageComponent;
+exports.usePagesComponents = usePagesComponents;
+exports.usePagesComponentsManager = usePagesComponentsManager;
 exports.usePanels = usePanels;
 exports.usePanneau = usePanneau;
 exports.usePanneauAuth = usePanneauAuth;

package/lib/hooks.js

@@ -600,7 +600,9 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
     }, null);
     var hasConfig = config !== null;
     if (hasConfig && typeof window !== 'undefined') {
-      Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('webfontloader')); }).then(function (_ref2) {
+      utils.loadPackage('webfontloader', function () {
+        return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('webfontloader')); });
+      }).then(function (_ref2) {
         var WebFont = _ref2["default"];
         return WebFont.load(_objectSpread__default["default"](_objectSpread__default["default"]({}, config), {}, {
           timeout: 3000,

package/lib/index.js

@@ -85,13 +85,13 @@ var toggle = PropTypes__default["default"].shape({
   label: PropTypes__default["default"].string
 });
 var toggles = PropTypes__default["default"].arrayOf(toggle);
-var tableColumn = PropTypes__default["default"].shape({
+var tableColumn = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
   id: PropTypes__default["default"].string,
   component: PropTypes__default["default"].string,
   path: PropTypes__default["default"].string,
   field: PropTypes__default["default"].string,
   columnClassName: PropTypes__default["default"].string
-});
+})]);
 var tableColumns = PropTypes__default["default"].arrayOf(tableColumn);
 
 /**
@@ -250,6 +250,8 @@ var getComponentFromName = function getComponentFromName() {
   return component;
 };
 
+new EventEmitter__default["default"]();
+
 var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
   _inherits__default["default"](ComponentsManager, _EventEmitter);
   var _super = _createSuper__default["default"](ComponentsManager);

package/lib/utils.js

@@ -16,6 +16,7 @@ var isArray = require('lodash/isArray');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var get = require('lodash/get');
 var capitalize = require('lodash/capitalize');
+var EventEmitter = require('wolfy87-eventemitter');
 var slugify = require('slugify');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -31,6 +32,7 @@ var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 var capitalize__default = /*#__PURE__*/_interopDefaultLegacy(capitalize);
+var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
 var slugify__default = /*#__PURE__*/_interopDefaultLegacy(slugify);
 
 var convertStyleToString = function convertStyleToString(style) {
@@ -96,7 +98,7 @@ var getComponent = function getComponent(component) {
   };
 };
 
-var _excluded = ["field"];
+var _excluded = ["id", "field"];
 var getColumnFromField = function getColumnFromField(field) {
   if (field === null) {
     return null;
@@ -127,12 +129,17 @@ var getColumnsWithFields = function getColumnsWithFields(resource, columns) {
     var _ref = isString__default["default"](column) ? {
         field: column
       } : column,
+      _ref$id = _ref.id,
+      colId = _ref$id === void 0 ? null : _ref$id,
       _ref$field = _ref.field,
-      fieldName = _ref$field === void 0 ? null : _ref$field,
+      colField = _ref$field === void 0 ? null : _ref$field,
       otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
-    return _objectSpread__default["default"](_objectSpread__default["default"]({}, fieldName !== null ? getColumnFromField(fields.find(function (it) {
+    var fieldName = colField || colId;
+    return _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldName !== null ? getColumnFromField(fields.find(function (it) {
       return it.name === fieldName;
-    }) || null) : null), otherProps);
+    }) || null) : null), otherProps), {}, {
+      id: colId
+    });
   }).filter(function (it) {
     return it !== null;
   }) : [];
@@ -267,6 +274,40 @@ var isMessage = function isMessage(message) {
   return isObject__default["default"](message) && typeof message.defaultMessage !== 'undefined';
 };
 
+/**
+ * Locale loader
+ */
+var loaders = {};
+var events = new EventEmitter__default["default"]();
+function loadPackage(name, loader) {
+  if (typeof loaders[name] === 'undefined') {
+    loaders[name] = {
+      loader: loader().then(function (response) {
+        loaders[name].loader = null;
+        loaders[name].loaded = true;
+        loaders[name].resource = response;
+        events.emit("loaded:".concat(name), response);
+        return response;
+      }),
+      loaded: false,
+      resource: null
+    };
+  }
+  return new Promise(function (resolve) {
+    var _ref = loaders[name] || {},
+      _ref$loaded = _ref.loaded,
+      loaded = _ref$loaded === void 0 ? false : _ref$loaded,
+      resource = _ref.resource;
+    if (loaded === true) {
+      resolve(resource);
+    } else {
+      events.once("loaded:".concat(name), function (response) {
+        resolve(response);
+      });
+    }
+  });
+}
+
 var setValue = function setValue(value, keyParts, fieldValue) {
   var key = keyParts.shift();
   var isArray = key.match(/^[0-9]+$/) !== null;
@@ -334,6 +375,7 @@ exports.getFileName = getFileName;
 exports.getPathValue = getPathValue;
 exports.getSelectOptions = getSelectOptions;
 exports.isMessage = isMessage;
+exports.loadPackage = loadPackage;
 exports.setFieldValue = setValue;
 exports.slug = slug;
 exports.validateFields = validateFields;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/core",
-    "version": "1.0.4",
+    "version": "1.1.0",
     "description": "",
     "keywords": [
         "javascript"
@@ -88,7 +88,7 @@
         "@uppy/tus": "^2.2.0",
         "@uppy/webcam": "^2.0.5",
         "@uppy/xhr-upload": "^2.0.7",
-        "bootstrap": "5.2.0-beta1",
+        "bootstrap": "^5.2.0",
         "change-case": "^4.1.2",
         "classnames": "^2.2.6",
         "css-mediaquery": "^0.1.2",
@@ -101,8 +101,8 @@
         "react-helmet": "^6.1.0",
         "react-intl": "^5.15.8||^6.0.0",
         "react-is": "^17.0.2",
-        "react-router": "^5.2.0",
-        "react-router-dom": "^5.2.0",
+        "react-router": "^6.2.1",
+        "react-router-dom": "^6.2.1",
         "react-use-gesture": "^9.0.0",
         "slugify": "^1.5.0",
         "snake-case": "^3.0.4",
@@ -114,5 +114,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "95997ec1ccd1b55d0d6f2522baa92d831bf5f13d"
+    "gitHead": "1d4ce10073e63024309c615ffaec2e1193aeec7e"
 }