@panneau/app 1.0.1-alpha.0 → 1.0.3-alpha.2

package/package.json

@@ -1,12 +1,9 @@
 {
     "name": "@panneau/app",
-    "version": "1.0.1-alpha.0",
-    "description": "The Panneau application package",
+    "version": "1.0.3-alpha.2",
+    "description": "",
     "keywords": [
-        "react",
-        "javascript",
-        "form",
-        "dashboard"
+        "javascript"
     ],
     "homepage": "https://github.com/folkloreinc/panneau-js",
     "repository": {
@@ -25,66 +22,81 @@
         {
             "name": "Nicolas Roy-Bourdages",
             "email": "nrb@folklore.email"
+        },
+        {
+            "name": "Julien Carignan",
+            "email": "jc@folklore.email"
+        },
+        {
+            "name": "Théo Gjini",
+            "email": "tg@folklore.email"
         }
     ],
+    "license": "ISC",
     "main": "lib/index.js",
     "module": "es/index.js",
+    "exports": {
+        ".": "./lib/index.js",
+        "./scss/styles": "./scss/styles.scss",
+        "./scss/styles.scss": "./scss/styles.scss",
+        "./assets/css/styles.css": "./assets/css/styles.css"
+    },
     "files": [
         "lib",
         "es",
-        "dist",
-        "src"
+        "assets",
+        "scss"
     ],
     "scripts": {
-        "storybook": "../../node_modules/.bin/start-storybook -p 9008 -c ../../.storybook-package",
-        "clean": "rm -rf dist && rm -rf lib && rm -rf es",
-        "webpack:dist": "../../node_modules/.bin/webpack --config ./webpack.config.js --progress --colors",
-        "webpack": "npm run webpack:dist",
-        "babel:es": "BABEL_ENV=es ../../node_modules/.bin/babel src --out-dir es --ignore src/**/*.story.jsx,src/**/*.test.jsx",
-        "babel:cjs": "BABEL_ENV=cjs ../../node_modules/.bin/babel src --out-dir lib --ignore src/**/*.story.jsx,src/**/*.test.jsx",
-        "babel": "npm run babel:es && npm run babel:cjs",
-        "copy:json": "rsync -a --include '*/' --include '*.json' --exclude '*' src/ lib/ && rsync -a --include '*/' --include '*.json' --exclude '*' src/ es/",
-        "intl": "node ../../scripts/buildPackageTranslations",
-        "build": "npm run babel && npm run intl && npm run copy:json",
-        "prepare": "npm run clean && npm run build",
-        "start": "npm run storybook"
-    },
-    "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "@fortawesome/fontawesome-free": "^5.7.1",
-        "@panneau/core": "^1.0.1-alpha.0",
-        "bootstrap": "^4.3.1",
-        "classnames": "^2.2.5",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.3.0",
-        "invariant": "^2.2.2",
-        "jquery": "^3.4.1",
-        "js-cookie": "^2.2.0",
-        "lodash": "^4.17.15",
-        "moment": "^2.22.1",
-        "popper": "^1.0.1",
-        "popper.js": "^1.15.0",
-        "prop-types": "^15.7.0",
-        "query-string": "^6.8.2",
-        "react-intl": "^3.1.6",
-        "react-redux": "^7.1.0",
-        "react-router": "^5.0.1",
-        "react-router-dom": "^5.0.1",
-        "redux": "^4.0.4",
-        "redux-promise": "^0.6.0",
-        "redux-thunk": "^2.3.0",
-        "whatwg-fetch": "^3.0.0",
-        "wolfy87-eventemitter": "^5.2.4"
+        "prepare": "../../scripts/prepare-package.sh --scss"
     },
     "devDependencies": {
-        "jquery-slim": "^3.0.0",
-        "react": "^16.9.0",
-        "react-dom": "^16.9.0",
-        "redux-devtools-extension": "^2.13.8"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
     },
     "peerDependencies": {
-        "react": "^16.8.0",
-        "react-dom": "^16.8.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    },
+    "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@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-alpha.1",
+        "@panneau/core": "^1.0.3-alpha.1",
+        "@panneau/data": "^1.0.3-alpha.1",
+        "@panneau/displays": "^1.0.3-alpha.1",
+        "@panneau/element-alert": "^1.0.3-alpha.1",
+        "@panneau/element-button": "^1.0.3-alpha.1",
+        "@panneau/element-buttons": "^1.0.3-alpha.1",
+        "@panneau/element-dropdown": "^1.0.3-alpha.2",
+        "@panneau/element-form": "^1.0.3-alpha.1",
+        "@panneau/element-form-group": "^1.0.3-alpha.1",
+        "@panneau/element-label": "^1.0.3-alpha.1",
+        "@panneau/element-link": "^1.0.3-alpha.2",
+        "@panneau/element-loading": "^1.0.3-alpha.1",
+        "@panneau/element-menu": "^1.0.3-alpha.2",
+        "@panneau/element-navbar": "^1.0.3-alpha.2",
+        "@panneau/element-pagination": "^1.0.3-alpha.2",
+        "@panneau/element-radios": "^1.0.3-alpha.1",
+        "@panneau/fields": "^1.0.3-alpha.2",
+        "@panneau/filters": "^1.0.3-alpha.1",
+        "@panneau/forms": "^1.0.3-alpha.1",
+        "@panneau/intl": "^1.0.3-alpha.1",
+        "@panneau/lists": "^1.0.3-alpha.2",
+        "@panneau/modals": "^1.0.3-alpha.1",
+        "@panneau/themes": "^1.0.3-alpha.1",
+        "classnames": "^2.2.6",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2",
+        "query-string": "^7.0.0",
+        "react-intl": "^5.15.8||^6.0.0",
+        "react-router": "^6.2.1",
+        "react-router-dom": "^6.2.1"
+    },
+    "publishConfig": {
+        "access": "public"
     },
-    "gitHead": "1bdcdd2b8266844e3739621aa29c91903075186f"
+    "gitHead": "3fb9865bb17e8ddc0b2d372d38f39700c90e2605"
 }

package/scss/styles.scss

@@ -0,0 +1,3 @@
+@import '~@panneau/themes/scss/vendor';
+@import '~@panneau/fields/scss/styles';
+// @import '~@panneau/displays/scss/styles';

package/es/Panneau.js

@@ -1,318 +0,0 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-import React from 'react';
-import { render as renderReact, hydrate as hydrateReact } from 'react-dom';
-import EventEmitter from 'wolfy87-eventemitter';
-import isObject from 'lodash/isObject';
-import moment from 'moment';
-import { ComponentsCollection } from '@panneau/core';
-import PanneauComponent from './components/Panneau';
-/**
- * Panneau Application
- */
-
-var Panneau =
-/*#__PURE__*/
-function (_EventEmitter) {
-  _inherits(Panneau, _EventEmitter);
-
-  _createClass(Panneau, null, [{
-    key: "setDefaultComponentsCollection",
-    value: function setDefaultComponentsCollection(componentsCollection, namespace) {
-      if (typeof namespace !== 'undefined') {
-        Panneau.defaultComponentsCollection.setComponents(componentsCollection, namespace);
-      } else {
-        Panneau.defaultComponentsCollection = componentsCollection;
-      }
-    }
-  }, {
-    key: "setDefaultLocaleMessages",
-    value: function setDefaultLocaleMessages(locale, messages) {
-      if (isObject(locale)) {
-        Panneau.defaultLocaleMessages = _objectSpread({}, locale);
-      } else {
-        Panneau.defaultLocaleMessages = _objectSpread({}, Panneau.defaultLocaleMessages, _defineProperty({}, locale, _objectSpread({}, messages)));
-      }
-    }
-    /**
-     * Create a new panneau environment
-     * @param  {object} definition The definition of the Panneau instance
-     * @param  {object} options Options for the new Panneau instance
-     */
-
-  }]);
-
-  function Panneau(definition, options) {
-    var _this;
-
-    _classCallCheck(this, Panneau);
-
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Panneau).call(this));
-    _this.options = {};
-    _this.onRendered = _this.onRendered.bind(_assertThisInitialized(_this));
-    _this.onHydrated = _this.onHydrated.bind(_assertThisInitialized(_this));
-    _this.element = null;
-    _this.rendered = false;
-    _this.definition = definition;
-    _this.user = null;
-    _this.locale = 'en';
-    _this.messages = {};
-    _this.componentsCollection = Panneau.defaultComponentsCollection;
-
-    _this.setOptions(options);
-
-    return _this;
-  }
-
-  _createClass(Panneau, [{
-    key: "onRendered",
-    value: function onRendered() {
-      this.emit('rendered', this.element);
-    }
-  }, {
-    key: "onHydrated",
-    value: function onHydrated() {
-      this.emit('hydrated', this.element);
-    }
-  }, {
-    key: "render",
-    value: function render(element) {
-      this.rendered = true;
-      this.element = element || this.element;
-      var root = this.getRootElement();
-      renderReact(root, this.element, this.onRendered);
-      this.emit('render', this.element);
-    }
-  }, {
-    key: "hydrate",
-    value: function hydrate(element) {
-      this.rendered = false;
-      this.element = element || this.element;
-      var root = this.getRootElement();
-      hydrateReact(root, this.element, this.onHydrated);
-      this.emit('hydrate', this.element);
-    }
-  }, {
-    key: "getRootProps",
-    value: function getRootProps() {
-      return {
-        componentsCollection: this.componentsCollection,
-        definition: this.definition,
-        user: this.user,
-        locale: this.locale,
-        messages: _objectSpread({}, this.messages)
-      };
-    }
-  }, {
-    key: "getRootElement",
-    value: function getRootElement() {
-      var rootProps = this.getRootProps();
-      var rootElement = React.createElement(PanneauComponent, rootProps);
-      return rootElement;
-    }
-    /**
-     * Set the options
-     * @param {object} options The new options
-     * @return {this}
-     */
-
-  }, {
-    key: "setOptions",
-    value: function setOptions() {
-      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-      var user = options.user,
-          locale = options.locale,
-          messages = options.messages,
-          componentsCollection = options.componentsCollection,
-          otherOptions = _objectWithoutProperties(options, ["user", "locale", "messages", "componentsCollection"]);
-
-      this.options = _objectSpread({}, this.options, {}, otherOptions);
-
-      if (typeof locale !== 'undefined') {
-        this.setLocale(locale);
-      }
-
-      if (typeof componentsCollection !== 'undefined') {
-        this.setComponentsCollection(componentsCollection);
-      }
-
-      if (typeof messages !== 'undefined') {
-        this.setMessages(messages);
-      }
-
-      if (typeof user !== 'undefined') {
-        this.setUser(user);
-      }
-
-      if (this.rendered) {
-        this.render();
-      }
-
-      return this;
-    }
-    /**
-     * Get the options
-     * @return {object} The options
-     */
-
-  }, {
-    key: "getOptions",
-    value: function getOptions() {
-      return this.options;
-    }
-    /**
-     * Set the definition
-     * @param {object} definition The new definition
-     * @return {this}
-     */
-
-  }, {
-    key: "setDefinition",
-    value: function setDefinition(definition) {
-      this.definition = definition;
-      return this;
-    }
-    /**
-     * Get the definition
-     * @return {object} The definition
-     */
-
-  }, {
-    key: "getDefinition",
-    value: function getDefinition() {
-      return this.definition;
-    }
-    /**
-     * Set the user
-     * @param {object} user The new user
-     * @return {this}
-     */
-
-  }, {
-    key: "setUser",
-    value: function setUser(user) {
-      this.user = user;
-      return this;
-    }
-    /**
-     * Get the user
-     * @return {object} The user
-     */
-
-  }, {
-    key: "getUser",
-    value: function getUser() {
-      return this.user;
-    }
-    /**
-     * Set the locale
-     * @param {string} locale The new locale
-     * @return {this}
-     */
-
-  }, {
-    key: "setLocale",
-    value: function setLocale(locale) {
-      this.locale = locale;
-      moment.locale(locale);
-      return this;
-    }
-    /**
-     * Get the locale
-     * @return {string} The locale
-     */
-
-  }, {
-    key: "getLocale",
-    value: function getLocale() {
-      return this.locale;
-    }
-    /**
-     * Set the messages
-     * @param {object} messages The new messages
-     * @return {this}
-     */
-
-  }, {
-    key: "setMessages",
-    value: function setMessages(messages) {
-      this.messages = Object.keys(messages || {}).reduce(function (allMessages, key) {
-        return _objectSpread({}, allMessages, _defineProperty({}, key, isObject(messages[key]) ? _objectSpread({}, isObject(allMessages[key] || null) ? allMessages[key] : null, {}, messages[key]) : messages[key]));
-      }, _objectSpread({}, Panneau.defaultLocaleMessages));
-      return this;
-    }
-    /**
-     * Get the messages
-     * @return {object} The messages
-     */
-
-  }, {
-    key: "getMessages",
-    value: function getMessages() {
-      return this.messages;
-    }
-    /**
-     * Alias to work with components collection
-     * @return {ComponentsCollection} The components collection
-     */
-
-  }, {
-    key: "components",
-    value: function components(key, value) {
-      if (typeof value !== 'undefined') {
-        this.componentsCollection.addComponent(key, value);
-        return this;
-      }
-
-      if (typeof key !== 'undefined') {
-        return this.componentsCollection.getComponent(key);
-      }
-
-      return this.componentsCollection;
-    }
-    /**
-     * Set the components collection
-     * @param {ComponentsCollection} fieldsCollection The new fields collection
-     */
-
-  }, {
-    key: "setComponentsCollection",
-    value: function setComponentsCollection(componentsCollection, namespace) {
-      if (typeof namespace !== 'undefined') {
-        this.componentsCollection.setComponents(componentsCollection, namespace);
-      } else {
-        this.componentsCollection = componentsCollection;
-      }
-
-      return this;
-    }
-    /**
-     * Get the components collection
-     * @return {ComponentsCollection} The fields collection used by this instance
-     */
-
-  }, {
-    key: "getComponentsCollection",
-    value: function getComponentsCollection(namespace) {
-      return typeof namespace !== 'undefined' ? this.componentsCollection.getCollection(namespace) : this.componentsCollection;
-    }
-  }]);
-
-  return Panneau;
-}(EventEmitter);
-
-Panneau.defaultComponentsCollection = new ComponentsCollection();
-Panneau.defaultLocaleMessages = {};
-export default Panneau;

package/es/actions/AuthActions.js

@@ -1,16 +0,0 @@
-/**
- * Constants
- */
-var SET_USER = 'auth@SET_USER';
-/**
- * Actions creator
- */
-
-var setUser = function setUser(user) {
-  return {
-    type: SET_USER,
-    payload: user
-  };
-};
-
-export { SET_USER, setUser };

package/es/actions/LayoutActions.js

@@ -1,14 +0,0 @@
-/**
- * Constants
- */
-export var UPDATE_LAYOUT = 'layout@UPDATE_LAYOUT';
-/**
- * Actions creator
- */
-
-export var updateLayout = function updateLayout(layout) {
-  return {
-    type: UPDATE_LAYOUT,
-    payload: layout
-  };
-};

package/es/components/App.js

@@ -1,129 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import React, { useCallback } from 'react'; // import PropTypes from 'prop-types';
-
-import { Route, Switch, Redirect, withRouter } from 'react-router';
-import { connect } from 'react-redux';
-import queryString from 'query-string';
-import { PropTypes as PanneauPropTypes } from '@panneau/core';
-import { useUrlGenerator, useDefinition } from '@panneau/core/contexts';
-import 'bootstrap';
-import Layout from './Layout';
-import Home from './pages/Home';
-import Account from './pages/Account';
-import ResourceIndex from './pages/ResourceIndex';
-import ResourceCreate from './pages/ResourceCreate';
-import ResourceShow from './pages/ResourceShow';
-import ResourceEdit from './pages/ResourceEdit';
-import ResourceDelete from './pages/ResourceDelete';
-var ResourcePages = {
-  index: ResourceIndex,
-  create: ResourceCreate,
-  show: ResourceShow,
-  edit: ResourceEdit,
-  "delete": ResourceDelete
-};
-var propTypes = {
-  history: PanneauPropTypes.history.isRequired,
-  user: PanneauPropTypes.user
-};
-var defaultProps = {
-  user: null
-};
-
-var App = function App(_ref) {
-  var history = _ref.history,
-      user = _ref.user;
-  var urlGenerator = useUrlGenerator();
-  var definition = useDefinition();
-  var resources = definition.resources();
-
-  var _getResourceActionUrl = useCallback(function (resource, action, id) {
-    return urlGenerator.resource(resource, action, id);
-  }, [urlGenerator]);
-
-  var _gotoResourceAction = function gotoResourceAction() {
-    return history.push(_getResourceActionUrl.apply(void 0, arguments));
-  };
-
-  var renderResourceRoutes = function renderResourceRoutes() {
-    var resource = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var id = resource !== null ? resource.id() : 'default';
-    return Object.keys(ResourcePages).map(function (action) {
-      return React.createElement(Route, {
-        key: "resource-".concat(id, "-").concat(action),
-        exact: true,
-        path: urlGenerator.resource(resource, action),
-        render: function render(_ref2) {
-          var _ref2$match$params = _ref2.match.params,
-              _ref2$match$params$re = _ref2$match$params.resource,
-              resourceId = _ref2$match$params$re === void 0 ? null : _ref2$match$params$re,
-              _ref2$match$params$id = _ref2$match$params.id,
-              itemId = _ref2$match$params$id === void 0 ? null : _ref2$match$params$id,
-              search = _ref2.location.search;
-          var query = queryString.parse(search);
-          var matchedResource = resource || resources.find(function (it) {
-            return resourceId !== null && it.id() === resourceId;
-          }) || null;
-          var PageComponent = ResourcePages[action];
-          return React.createElement(PageComponent, {
-            action: action,
-            query: query,
-            itemId: itemId,
-            resource: matchedResource,
-            getResourceActionUrl: function getResourceActionUrl() {
-              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                args[_key] = arguments[_key];
-              }
-
-              return _getResourceActionUrl.apply(void 0, [matchedResource].concat(args));
-            },
-            gotoResourceAction: function gotoResourceAction() {
-              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-                args[_key2] = arguments[_key2];
-              }
-
-              return _gotoResourceAction.apply(void 0, [matchedResource].concat(args));
-            }
-          });
-        }
-      });
-    });
-  };
-
-  return React.createElement(Layout, null, React.createElement(Switch, null, user !== null ? React.createElement(Route, {
-    exact: true,
-    path: urlGenerator.route('account'),
-    render: function render() {
-      return React.createElement(Account, {
-        resource: definition.resource('users')
-      });
-    }
-  }) : React.createElement(Route, {
-    exact: true,
-    path: urlGenerator.route('account'),
-    render: function render() {
-      return React.createElement(Redirect, {
-        to: urlGenerator.route('home')
-      });
-    }
-  }), resources.filter(function (resource) {
-    return resource.hasRoutes();
-  }).reduce(function (routes, resource) {
-    return [].concat(_toConsumableArray(routes), _toConsumableArray(renderResourceRoutes(resource)));
-  }, []), renderResourceRoutes(), React.createElement(Route, {
-    exact: true,
-    path: urlGenerator.route('home'),
-    component: Home
-  })));
-};
-
-App.propTypes = propTypes;
-App.defaultProps = defaultProps;
-var WithStateContainer = connect(function (_ref3) {
-  var auth = _ref3.auth;
-  return {
-    user: auth.user || null
-  };
-})(App);
-var WithRouter = withRouter(WithStateContainer);
-export default WithRouter;