@panneau/app 1.0.3 → 1.1.0

package/lib/index.js

@@ -18,9 +18,10 @@ var FiltersProvider = require('@panneau/filters');
 var FormsProvider = require('@panneau/forms');
 var intl = require('@panneau/intl');
 var ListsProvider = require('@panneau/lists');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var isObject = require('lodash/isObject');
 var queryString = require('query-string');
 var reactIntl = require('react-intl');
 var hooks = require('@panneau/core/hooks');
@@ -28,8 +29,9 @@ var utils = require('@panneau/core/utils');
 var classNames = require('classnames');
 var Button = require('@panneau/element-button');
 var Form = require('@panneau/element-form');
-var Navbar = require('@panneau/element-navbar');
+var isArray = require('lodash/isArray');
 var Menu = require('@panneau/element-menu');
+var Navbar = require('@panneau/element-navbar');
 var Label = require('@panneau/element-label');
 var isString = require('lodash/isString');
 var Alert = require('@panneau/element-alert');
@@ -51,14 +53,16 @@ var FieldsProvider__default = /*#__PURE__*/_interopDefaultLegacy(FieldsProvider)
 var FiltersProvider__default = /*#__PURE__*/_interopDefaultLegacy(FiltersProvider);
 var FormsProvider__default = /*#__PURE__*/_interopDefaultLegacy(FormsProvider);
 var ListsProvider__default = /*#__PURE__*/_interopDefaultLegacy(ListsProvider);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
-var Navbar__default = /*#__PURE__*/_interopDefaultLegacy(Navbar);
+var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
+var Navbar__default = /*#__PURE__*/_interopDefaultLegacy(Navbar);
 var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
 var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
@@ -67,7 +71,7 @@ var Pagination__default = /*#__PURE__*/_interopDefaultLegacy(Pagination);
 var _toPropertyKey__default = /*#__PURE__*/_interopDefaultLegacy(_toPropertyKey);
 var FormGroup__default = /*#__PURE__*/_interopDefaultLegacy(FormGroup);
 
-var _excluded$5 = ["resource", "action", "previous", "status", "value", "onSubmit", "errors", "generalError", "className"];
+var _excluded$6 = ["resource", "action", "previous", "status", "value", "onSubmit", "errors", "generalError", "className"];
 var propTypes$m = {
   resource: core.PropTypes.resource.isRequired,
   action: PropTypes__default["default"].string,
@@ -102,7 +106,7 @@ var DeleteForm = function DeleteForm(_ref) {
     _ref.errors;
     var generalError = _ref.generalError,
     className = _ref.className,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
   var _ref2 = value || {},
     _ref2$id = _ref2.id,
     id = _ref2$id === void 0 ? null : _ref2$id;
@@ -176,7 +180,7 @@ var DeleteForm = function DeleteForm(_ref) {
 DeleteForm.propTypes = propTypes$m;
 DeleteForm.defaultProps = defaultProps$m;
 
-var _excluded$4 = ["component", "resource", "onSuccess", "item", "type", "isDelete"];
+var _excluded$5 = ["component", "resource", "onSuccess", "item", "type", "isDelete"];
 var propTypes$l = {
   component: PropTypes__default["default"].string,
   resource: core.PropTypes.resource.isRequired,
@@ -200,7 +204,7 @@ var ResourceForm = function ResourceForm(_ref) {
     item = _ref.item,
     type = _ref.type,
     isDelete = _ref.isDelete,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
   var locales = contexts.useLocales();
   var FormComponents = contexts.useFormsComponents();
   var _resource$fields = resource.fields,
@@ -451,30 +455,65 @@ var ResourcesMenu = function ResourcesMenu(_ref) {
 ResourcesMenu.propTypes = propTypes$j;
 ResourcesMenu.defaultProps = defaultProps$j;
 
-/* eslint-disable react/jsx-props-no-spreading */
 var propTypes$i = {};
 var defaultProps$i = {};
 var MainNavbar = function MainNavbar(props) {
   var _usePanneau = contexts.usePanneau(),
-    name = _usePanneau.name;
+    name = _usePanneau.name,
+    _usePanneau$menus = _usePanneau.menus,
+    menus = _usePanneau$menus === void 0 ? null : _usePanneau$menus;
+  var _ref = menus || {},
+    _ref$main = _ref.main,
+    main = _ref$main === void 0 ? null : _ref$main,
+    _ref$guest = _ref.guest,
+    guest = _ref$guest === void 0 ? null : _ref$guest;
   var _usePanneauColorSchem = contexts.usePanneauColorScheme(),
     background = _usePanneauColorSchem.background;
   var route = contexts.useUrlGenerator();
   var user = auth.useUser();
+  var items = React.useMemo(function () {
+    var menuItems = (user !== null ? main : guest) || [];
+    var hasResources = menuItems.indexOf('resources') !== -1;
+    var hasAccount = menuItems.indexOf('account') !== -1;
+    return [!hasResources && user !== null ? 'resources' : null].concat(_toConsumableArray__default["default"](menuItems), [!hasAccount && menuItems.indexOf('separator') === -1 ? 'separator' : null, !hasAccount ? 'account' : null]).filter(function (it) {
+      return it !== null;
+    }).reduce(function (currentItems, item) {
+      if (item === 'resources') {
+        return [].concat(_toConsumableArray__default["default"](currentItems), [/*#__PURE__*/React__default["default"].createElement(ResourcesMenu, {
+          className: "navbar-nav",
+          itemClassName: "nav-item",
+          linkClassName: "nav-link"
+        })]);
+      }
+      if (item === 'account') {
+        return [].concat(_toConsumableArray__default["default"](currentItems), [/*#__PURE__*/React__default["default"].createElement(AccountMenu, {
+          className: "navbar-nav",
+          itemClassName: "nav-item",
+          linkClassName: "nav-link"
+        })]);
+      }
+      if (item === 'separator') {
+        return [].concat(_toConsumableArray__default["default"](currentItems), [/*#__PURE__*/React__default["default"].createElement("span", {
+          className: "ms-auto"
+        })]);
+      }
+      var lastItem = currentItems.length > 0 ? currentItems[currentItems.length - 1] : null;
+      return isArray__default["default"](lastItem) ? [].concat(_toConsumableArray__default["default"](currentItems.slice(0, currentItems.length - 1)), [[].concat(_toConsumableArray__default["default"](lastItem), [item])]) : [].concat(_toConsumableArray__default["default"](currentItems), [[item]]);
+    }, []).map(function (it) {
+      return isArray__default["default"](it) ? /*#__PURE__*/React__default["default"].createElement(Menu__default["default"], {
+        items: it,
+        className: "navbar-nav",
+        itemClassName: "nav-item",
+        linkClassName: "nav-link"
+      }) : it;
+    });
+  }, [main]);
   return /*#__PURE__*/React__default["default"].createElement(Navbar__default["default"], Object.assign({
     theme: background
   }, props), name !== null ? /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
     to: route('home'),
     className: "navbar-brand"
-  }, name) : null, user !== null ? /*#__PURE__*/React__default["default"].createElement(ResourcesMenu, {
-    className: "navbar-nav ml-4",
-    itemClassName: "nav-item",
-    linkClassName: "nav-link"
-  }) : null, /*#__PURE__*/React__default["default"].createElement(AccountMenu, {
-    className: "navbar-nav ms-auto",
-    itemClassName: "nav-item",
-    linkClassName: "nav-link"
-  }));
+  }, name) : null, items);
 };
 MainNavbar.propTypes = propTypes$i;
 MainNavbar.defaultProps = defaultProps$i;
@@ -739,10 +778,9 @@ var ResourceCreateButtom = function ResourceCreateButtom(_ref) {
     setDropdownOpened = _useState2[1];
   var onClickDropdown = React.useCallback(function (e) {
     e.preventDefault();
-    setDropdownOpened(function (opened) {
-      return !opened;
-    });
-  }, [setDropdownOpened]);
+    e.stopPropagation();
+    setDropdownOpened(!dropdownOpened);
+  }, [setDropdownOpened, dropdownOpened]);
   var finalTypes = types !== null ? types.filter(function (_ref2) {
     var _ref2$settings = _ref2.settings,
       _ref2$settings2 = _ref2$settings === void 0 ? {} : _ref2$settings,
@@ -752,8 +790,10 @@ var ResourceCreateButtom = function ResourceCreateButtom(_ref) {
   }) : null;
   var hasMultipleTypes = finalTypes !== null && finalTypes.length > 1;
   var onDropdownClickOutside = React.useCallback(function () {
-    setDropdownOpened(false);
-  }, [setDropdownOpened]);
+    if (dropdownOpened) {
+      setDropdownOpened(false);
+    }
+  }, [setDropdownOpened, dropdownOpened]);
   var button = /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     href: !hasMultipleTypes ? "".concat(resourceRoute('create')).concat(finalTypes !== null && finalTypes.length === 1 ? "?type=".concat(finalTypes[0].id) : '') : '#',
     size: "lg",
@@ -793,7 +833,7 @@ var ResourceCreateButtom = function ResourceCreateButtom(_ref) {
 ResourceCreateButtom.propTypes = propTypes$c;
 ResourceCreateButtom.defaultProps = defaultProps$c;
 
-var _excluded$3 = ["component", "name", "groupLabel"];
+var _excluded$4 = ["component", "name", "groupLabel"];
 var propTypes$b = {
   filters: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
     id: PropTypes__default["default"].string.isRequired,
@@ -858,7 +898,7 @@ var ResourceFilters = function ResourceFilters(_ref) {
     var component = _ref3.component,
       name = _ref3.name,
       groupLabel = _ref3.groupLabel,
-      filterProps = _objectWithoutProperties__default["default"](_ref3, _excluded$3);
+      filterProps = _objectWithoutProperties__default["default"](_ref3, _excluded$4);
     var FilterComponent = utils.getComponentFromName(component, FilterComponents, null);
     var filterValue = value !== null && value[name] ? value[name] : null;
     var onFilterChange = React.useCallback(function (newFilterValue) {
@@ -893,8 +933,8 @@ var ResourceFilters = function ResourceFilters(_ref) {
 ResourceFilters.propTypes = propTypes$b;
 ResourceFilters.defaultProps = defaultProps$b;
 
-var _excluded$2 = ["component", "showPagination", "filters"],
-  _excluded2 = ["page"];
+var _excluded$3 = ["component", "showPagination", "filters"],
+  _excluded2$1 = ["page"];
 var propTypes$a = {
   resource: core.PropTypes.resource.isRequired,
   query: PropTypes__default["default"].object,
@@ -931,7 +971,7 @@ var ResourceItemsList = function ResourceItemsList(_ref) {
     showPagination = _resource$index2$show === void 0 ? true : _resource$index2$show,
     _resource$index2$filt = _resource$index2.filters,
     filters = _resource$index2$filt === void 0 ? null : _resource$index2$filt,
-    listProps = _objectWithoutProperties__default["default"](_resource$index2, _excluded$2);
+    listProps = _objectWithoutProperties__default["default"](_resource$index2, _excluded$3);
   var _usePanneauColorSchem = contexts.usePanneauColorScheme(),
     _usePanneauColorSchem2 = _usePanneauColorSchem.background,
     theme = _usePanneauColorSchem2 === void 0 ? null : _usePanneauColorSchem2;
@@ -940,7 +980,7 @@ var ResourceItemsList = function ResourceItemsList(_ref) {
       var _ref2 = query || {},
         _ref2$page = _ref2.page,
         currentPage = _ref2$page === void 0 ? 1 : _ref2$page,
-        rest = _objectWithoutProperties__default["default"](_ref2, _excluded2);
+        rest = _objectWithoutProperties__default["default"](_ref2, _excluded2$1);
       return [currentPage, rest];
     }, [query]),
     _useMemo2 = _slicedToArray__default["default"](_useMemo, 2),
@@ -984,7 +1024,7 @@ var ResourceItemsList = function ResourceItemsList(_ref) {
 ResourceItemsList.propTypes = propTypes$a;
 ResourceItemsList.defaultProps = defaultProps$a;
 
-var _excluded$1 = ["id", "component"];
+var _excluded$2 = ["id", "component"];
 var propTypes$9 = {
   resource: core.PropTypes.resource.isRequired,
   defaultActions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object) // eslint-disable-line react/forbid-prop-types
@@ -1055,8 +1095,10 @@ var ResourceIndexPage = function ResourceIndexPage(_ref) {
     navigate("".concat(url, "?").concat(queryString$1));
   }, [navigate, url, paginated]);
   var onClickCloseAlert = React.useCallback(function () {
-    history.replace(url);
-  }, [history, url]);
+    navigate(url, {
+      replace: true
+    });
+  }, [navigate, url]);
   return /*#__PURE__*/React__default["default"].createElement(contexts.ResourceProvider, {
     resource: resource
   }, /*#__PURE__*/React__default["default"].createElement(MainLayout, null, /*#__PURE__*/React__default["default"].createElement(PageHeader, {
@@ -1067,7 +1109,7 @@ var ResourceIndexPage = function ResourceIndexPage(_ref) {
       var id = _ref5.id,
         _ref5$component = _ref5.component,
         component = _ref5$component === void 0 ? Button__default["default"] : _ref5$component,
-        actionProps = _objectWithoutProperties__default["default"](_ref5, _excluded$1);
+        actionProps = _objectWithoutProperties__default["default"](_ref5, _excluded$2);
       var ActionComponent = isString__default["default"](component) ? componentsManager.getComponent(component) : component;
       return ActionComponent !== null ? /*#__PURE__*/React__default["default"].createElement(ActionComponent, Object.assign({
         key: "action-".concat(id)
@@ -1444,7 +1486,7 @@ var ErrorPage = function ErrorPage(_ref) {
 ErrorPage.propTypes = propTypes$2;
 ErrorPage.defaultProps = defaultProps$2;
 
-var _excluded = ["path", "component", "exact"];
+var _excluded$1 = ["path", "component", "exact"];
 var createResourceRoutes = function createResourceRoutes(resource, _ref) {
   var route = _ref.route,
     componentsManager = _ref.componentsManager,
@@ -1532,7 +1574,7 @@ var createResourceRoutes = function createResourceRoutes(resource, _ref) {
       component = _ref4.component,
       _ref4$exact = _ref4.exact,
       exact = _ref4$exact === void 0 ? true : _ref4$exact,
-      pageProps = _objectWithoutProperties__default["default"](_ref4, _excluded);
+      pageProps = _objectWithoutProperties__default["default"](_ref4, _excluded$1);
     var RouteComponent = componentsManager.getComponent(component);
     return RouteComponent !== null ? /*#__PURE__*/React__default["default"].createElement(reactRouter.Route, {
       key: "route-".concat(path),
@@ -1545,6 +1587,8 @@ var createResourceRoutes = function createResourceRoutes(resource, _ref) {
   })));
 };
 
+var _excluded = ["home", "login", "account", "error", "index", "show", "create", "edit", "delete"],
+  _excluded2 = ["path", "route", "component", "exact"];
 var propTypes$1 = {
   statusCode: core.PropTypes.statusCode
 };
@@ -1581,7 +1625,8 @@ var PanneauRoutes = function PanneauRoutes(_ref) {
   // Custom Pages
   var _usePanneau = contexts.usePanneau(),
     _usePanneau$pages = _usePanneau.pages,
-    pages = _usePanneau$pages === void 0 ? null : _usePanneau$pages;
+    pages = _usePanneau$pages === void 0 ? null : _usePanneau$pages,
+    routesDefinition = _usePanneau.routes;
   var _ref2 = pages || {},
     _ref2$home = _ref2.home,
     homePage = _ref2$home === void 0 ? null : _ref2$home,
@@ -1591,6 +1636,30 @@ var PanneauRoutes = function PanneauRoutes(_ref) {
     accountPage = _ref2$account === void 0 ? null : _ref2$account,
     _ref2$error = _ref2.error,
     errorPage = _ref2$error === void 0 ? null : _ref2$error;
+    _ref2.index;
+    _ref2.show;
+    _ref2.create;
+    _ref2.edit;
+    _ref2["delete"];
+    var otherPages = _objectWithoutProperties__default["default"](_ref2, _excluded);
+  var customRoutes = React.useMemo(function () {
+    return [].concat(_toConsumableArray__default["default"](Object.keys(routesDefinition).filter(function (key) {
+      return key.match(/^(resources\.|auth\.)/) === null && key !== 'home' && key !== 'account';
+    }).filter(function (key) {
+      var routeDef = routesDefinition[key];
+      return isObject__default["default"](routeDef) && typeof routeDef.component !== 'undefined' && typeof routeDef.path !== 'undefined';
+    }).map(function (key) {
+      return routesDefinition[key];
+    })), _toConsumableArray__default["default"](Object.keys(otherPages).map(function (key) {
+      return otherPages[key];
+    }).filter(function (_ref3) {
+      var _ref3$path = _ref3.path,
+        path = _ref3$path === void 0 ? null : _ref3$path,
+        _ref3$route = _ref3.route,
+        pageRoute = _ref3$route === void 0 ? null : _ref3$route;
+      return path !== null || pageRoute !== null;
+    })));
+  }, [routesDefinition, otherPages]);
   var HomeComponent = componentsManager.getComponent(homePage === null || homePage === void 0 ? void 0 : homePage.component) || HomePage;
   var LoginComponent = componentsManager.getComponent(loginPage === null || loginPage === void 0 ? void 0 : loginPage.component) || LoginPage;
   var AccountComponent = componentsManager.getComponent(accountPage === null || accountPage === void 0 ? void 0 : accountPage.component) || AccountPage;
@@ -1624,8 +1693,8 @@ var PanneauRoutes = function PanneauRoutes(_ref) {
     exact: true,
     element: /*#__PURE__*/React__default["default"].createElement(HomeComponent, null)
   }), resources.map(function (resource) {
-    var _ref3 = resource || {},
-      resourceId = _ref3.id;
+    var _ref4 = resource || {},
+      resourceId = _ref4.id;
     return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
       key: "resource-".concat(resourceId)
     }, createResourceRoutes(resource, {
@@ -1637,6 +1706,21 @@ var PanneauRoutes = function PanneauRoutes(_ref) {
     path: routes.account,
     exact: true,
     element: /*#__PURE__*/React__default["default"].createElement(AccountComponent, null)
+  }), customRoutes.map(function (_ref5) {
+    var _ref5$path = _ref5.path,
+      path = _ref5$path === void 0 ? null : _ref5$path,
+      _ref5$route = _ref5.route,
+      pageRoute = _ref5$route === void 0 ? null : _ref5$route,
+      component = _ref5.component,
+      _ref5$exact = _ref5.exact,
+      exact = _ref5$exact === void 0 ? true : _ref5$exact,
+      props = _objectWithoutProperties__default["default"](_ref5, _excluded2);
+    var PageComponent = componentsManager.getComponent(component);
+    return PageComponent !== null ? /*#__PURE__*/React__default["default"].createElement(reactRouter.Route, {
+      path: path || routes[pageRoute],
+      exact: exact,
+      element: /*#__PURE__*/React__default["default"].createElement(PageComponent, props)
+    }) : null;
   }), /*#__PURE__*/React__default["default"].createElement(reactRouter.Route, {
     path: "*",
     element: /*#__PURE__*/React__default["default"].createElement(ErrorComponent, null)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/app",
-    "version": "1.0.3",
+    "version": "1.1.0",
     "description": "",
     "keywords": [
         "javascript"
@@ -63,30 +63,30 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
         "@fortawesome/react-fontawesome": "^0.1.14",
-        "@panneau/auth": "^1.0.3",
-        "@panneau/core": "^1.0.3",
-        "@panneau/data": "^1.0.3",
-        "@panneau/displays": "^1.0.3",
-        "@panneau/element-alert": "^1.0.3",
-        "@panneau/element-button": "^1.0.3",
-        "@panneau/element-buttons": "^1.0.3",
-        "@panneau/element-dropdown": "^1.0.3",
-        "@panneau/element-form": "^1.0.3",
-        "@panneau/element-form-group": "^1.0.3",
-        "@panneau/element-label": "^1.0.3",
-        "@panneau/element-link": "^1.0.3",
-        "@panneau/element-loading": "^1.0.3",
-        "@panneau/element-menu": "^1.0.3",
-        "@panneau/element-navbar": "^1.0.3",
-        "@panneau/element-pagination": "^1.0.3",
-        "@panneau/element-radios": "^1.0.3",
-        "@panneau/fields": "^1.0.3",
-        "@panneau/filters": "^1.0.3",
-        "@panneau/forms": "^1.0.3",
-        "@panneau/intl": "^1.0.3",
-        "@panneau/lists": "^1.0.3",
-        "@panneau/modals": "^1.0.3",
-        "@panneau/themes": "^1.0.3",
+        "@panneau/auth": "^1.1.0",
+        "@panneau/core": "^1.1.0",
+        "@panneau/data": "^1.1.0",
+        "@panneau/displays": "^1.1.0",
+        "@panneau/element-alert": "^1.1.0",
+        "@panneau/element-button": "^1.1.0",
+        "@panneau/element-buttons": "^1.1.0",
+        "@panneau/element-dropdown": "^1.1.0",
+        "@panneau/element-form": "^1.1.0",
+        "@panneau/element-form-group": "^1.1.0",
+        "@panneau/element-label": "^1.1.0",
+        "@panneau/element-link": "^1.1.0",
+        "@panneau/element-loading": "^1.1.0",
+        "@panneau/element-menu": "^1.1.0",
+        "@panneau/element-navbar": "^1.1.0",
+        "@panneau/element-pagination": "^1.1.0",
+        "@panneau/element-radios": "^1.1.0",
+        "@panneau/fields": "^1.1.0",
+        "@panneau/filters": "^1.1.0",
+        "@panneau/forms": "^1.1.0",
+        "@panneau/intl": "^1.1.0",
+        "@panneau/lists": "^1.1.0",
+        "@panneau/modals": "^1.1.0",
+        "@panneau/themes": "^1.1.0",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -98,5 +98,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "59e6842b1a768acb6fa826e6a6396d09e239c955"
+    "gitHead": "1d4ce10073e63024309c615ffaec2e1193aeec7e"
 }

package/scss/styles.scss

@@ -1,3 +1,10 @@
 @import '~@panneau/themes/scss/vendor';
 @import '~@panneau/fields/scss/styles';
-// @import '~@panneau/displays/scss/styles';
+@import '~@panneau/displays/scss/styles';
+@import '~@panneau/forms/scss/styles';
+@import '~@panneau/lists/scss/styles';
+@import '~@panneau/filters/scss/styles';
+@import '~@panneau/modals/assets/css/styles.css';
+@import '~@panneau/element-button/assets/css/styles.css';
+@import '~@panneau/element-buttons/assets/css/styles.css';
+@import '~@panneau/element-form-group/assets/css/styles.css';