piral-dashboard 1.0.0-pre.2296 → 1.0.0

package/lib/create.js

@@ -1,56 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createDashboardApi = void 0;
-var tslib_1 = require("tslib");
-var actions = require("./actions");
-var piral_core_1 = require("piral-core");
-var default_1 = require("./default");
-function getPreferences(defaultPreferences, customPreferences) {
-    if (customPreferences === void 0) { customPreferences = {}; }
-    return tslib_1.__assign(tslib_1.__assign({}, defaultPreferences), customPreferences);
-}
-function getTiles(items, defaultPreferences) {
-    var tiles = {};
-    var i = 0;
-    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
-        var _a = items_1[_i], component = _a.component, preferences = _a.preferences;
-        tiles["global-" + i++] = {
-            pilet: undefined,
-            component: component,
-            preferences: getPreferences(defaultPreferences, preferences),
-        };
-    }
-    return tiles;
-}
+const actions = require("./actions");
+const piral_core_1 = require("piral-core");
+const Dashboard_1 = require("./Dashboard");
+const helpers_1 = require("./helpers");
 /**
  * Creates the Pilet API extension for activating dashboard support.
  */
-function createDashboardApi(config) {
-    if (config === void 0) { config = {}; }
-    var _a = config.tiles, tiles = _a === void 0 ? [] : _a, _b = config.defaultPreferences, defaultPreferences = _b === void 0 ? {} : _b;
-    return function (context) {
+function createDashboardApi(config = {}) {
+    const { tiles = [], defaultPreferences = {}, routes = ['/'] } = config;
+    return (context) => {
         context.defineActions(actions);
-        context.dispatch(function (state) { return (tslib_1.__assign(tslib_1.__assign({}, state), { components: tslib_1.__assign({ DashboardTile: default_1.DefaultTile, DashboardContainer: default_1.DefaultContainer }, state.components), registry: tslib_1.__assign(tslib_1.__assign({}, state.registry), { tiles: getTiles(tiles, defaultPreferences) }) })); });
-        return function (api, target) {
-            var pilet = target.name;
-            var next = 0;
+        context.dispatch((0, piral_core_1.withAll)((0, helpers_1.withTiles)((0, helpers_1.getTiles)(tiles, defaultPreferences)), (0, piral_core_1.withRootExtension)('piral-dashboard', Dashboard_1.Dashboard), (0, helpers_1.withRoutes)(routes)));
+        return (api, target) => {
+            const pilet = target.name;
+            let next = 0;
             return {
-                registerTile: function (name, arg, preferences) {
+                registerTile(name, arg, preferences) {
                     if (typeof name !== 'string') {
                         preferences = arg;
                         arg = name;
                         name = next++;
                     }
-                    var id = piral_core_1.buildName(pilet, name);
+                    const id = (0, piral_core_1.buildName)(pilet, name);
                     context.registerTile(id, {
-                        pilet: pilet,
-                        component: piral_core_1.withApi(context, arg, api, 'tile'),
-                        preferences: getPreferences(defaultPreferences, preferences),
+                        pilet,
+                        component: (0, piral_core_1.withApi)(context, arg, api, 'tile'),
+                        preferences: (0, helpers_1.getPreferences)(defaultPreferences, preferences),
                     });
-                    return function () { return api.unregisterTile(name); };
+                    return () => api.unregisterTile(name);
                 },
-                unregisterTile: function (name) {
-                    var id = piral_core_1.buildName(pilet, name);
+                unregisterTile(name) {
+                    const id = (0, piral_core_1.buildName)(pilet, name);
                     context.unregisterTile(id);
                 },
             };

package/lib/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;;AAAA,mCAAqC;AAErC,yCAAmE;AACnE,qCAA0D;AA8B1D,SAAS,cAAc,CAAC,kBAAmC,EAAE,iBAAuC;IAAvC,kCAAA,EAAA,sBAAuC;IAClG,6CACK,kBAAkB,GAClB,iBAAiB,EACpB;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,KAAyB,EAAE,kBAAmC;IAC9E,IAAM,KAAK,GAA2B,EAAE,CAAC;IACzC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEV,KAAyC,UAAK,EAAL,eAAK,EAAL,mBAAK,EAAL,IAAK,EAAE;QAArC,IAAA,gBAA0B,EAAxB,SAAS,eAAA,EAAE,WAAW,iBAAA;QACjC,KAAK,CAAC,YAAU,CAAC,EAAI,CAAC,GAAG;YACvB,KAAK,EAAE,SAAS;YAChB,SAAS,WAAA;YACT,WAAW,EAAE,cAAc,CAAC,kBAAkB,EAAE,WAAW,CAAC;SAC7D,CAAC;KACH;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;GAEG;AACH,SAAgB,kBAAkB,CAAC,MAA4B;IAA5B,uBAAA,EAAA,WAA4B;IACrD,IAAA,KAAwC,MAAM,MAApC,EAAV,KAAK,mBAAG,EAAE,KAAA,EAAE,KAA4B,MAAM,mBAAX,EAAvB,kBAAkB,mBAAG,EAAE,KAAA,CAAY;IAEvD,OAAO,UAAC,OAAO;QACb,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/B,OAAO,CAAC,QAAQ,CAAC,UAAC,KAAK,IAAK,OAAA,uCACvB,KAAK,KACR,UAAU,qBACR,aAAa,EAAE,qBAAW,EAC1B,kBAAkB,EAAE,0BAAgB,IACjC,KAAK,CAAC,UAAU,GAErB,QAAQ,wCACH,KAAK,CAAC,QAAQ,KACjB,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC,OAE5C,EAX0B,CAW1B,CAAC,CAAC;QAEJ,OAAO,UAAC,GAAG,EAAE,MAAM;YACjB,IAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC;YAC1B,IAAI,IAAI,GAAG,CAAC,CAAC;YAEb,OAAO;gBACL,YAAY,EAAZ,UAAa,IAAI,EAAE,GAAG,EAAE,WAAY;oBAClC,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;wBAC5B,WAAW,GAAG,GAAG,CAAC;wBAClB,GAAG,GAAG,IAAI,CAAC;wBACX,IAAI,GAAG,IAAI,EAAE,CAAC;qBACf;oBAED,IAAM,EAAE,GAAG,sBAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;oBAClC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE;wBACvB,KAAK,OAAA;wBACL,SAAS,EAAE,oBAAO,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC;wBAC7C,WAAW,EAAE,cAAc,CAAC,kBAAkB,EAAE,WAAW,CAAC;qBAC7D,CAAC,CAAC;oBACH,OAAO,cAAM,OAAA,GAAG,CAAC,cAAc,CAAC,IAAI,CAAC,EAAxB,CAAwB,CAAC;gBACxC,CAAC;gBACD,cAAc,YAAC,IAAI;oBACjB,IAAM,EAAE,GAAG,sBAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;oBAClC,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;gBAC7B,CAAC;aACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AA9CD,gDA8CC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AAAA,qCAAqC;AACrC,2CAAyF;AACzF,2CAAwC;AAExC,uCAA4E;AAuB5E;;GAEG;AACH,SAAgB,kBAAkB,CAAC,SAA0B,EAAE;IAC7D,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,kBAAkB,GAAG,EAAE,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;IAEvE,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/B,OAAO,CAAC,QAAQ,CACd,IAAA,oBAAO,EACL,IAAA,mBAAS,EAAC,IAAA,kBAAQ,EAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAC9C,IAAA,8BAAiB,EAAC,iBAAiB,EAAE,qBAAS,CAAC,EAC/C,IAAA,oBAAU,EAAC,MAAM,CAAC,CACnB,CACF,CAAC;QAEF,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;YACrB,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC;YAC1B,IAAI,IAAI,GAAG,CAAC,CAAC;YAEb,OAAO;gBACL,YAAY,CAAC,IAAI,EAAE,GAAG,EAAE,WAAY;oBAClC,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;wBAC5B,WAAW,GAAG,GAAG,CAAC;wBAClB,GAAG,GAAG,IAAI,CAAC;wBACX,IAAI,GAAG,IAAI,EAAE,CAAC;qBACf;oBAED,MAAM,EAAE,GAAG,IAAA,sBAAS,EAAC,KAAK,EAAE,IAAI,CAAC,CAAC;oBAClC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE;wBACvB,KAAK;wBACL,SAAS,EAAE,IAAA,oBAAO,EAAC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC;wBAC7C,WAAW,EAAE,IAAA,wBAAc,EAAC,kBAAkB,EAAE,WAAW,CAAC;qBAC7D,CAAC,CAAC;oBACH,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;gBACxC,CAAC;gBACD,cAAc,CAAC,IAAI;oBACjB,MAAM,EAAE,GAAG,IAAA,sBAAS,EAAC,KAAK,EAAE,IAAI,CAAC,CAAC;oBAClC,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;gBAC7B,CAAC;aACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAzCD,gDAyCC"}

package/lib/default.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultTile = exports.DefaultContainer = void 0;
-var React = require("react");
-var piral_core_1 = require("piral-core");
-exports.DefaultContainer = function (props) { return (React.createElement(piral_core_1.ExtensionSlot, { name: "dashboard", params: props, empty: function () { return piral_core_1.defaultRender(props.children, 'default_dashboard'); } })); };
-exports.DefaultTile = function (props) { return piral_core_1.defaultRender(props.children); };
+const React = require("react");
+const piral_core_1 = require("piral-core");
+const DefaultContainer = (props) => (React.createElement(piral_core_1.ExtensionSlot, { name: "dashboard", params: props, empty: () => (0, piral_core_1.defaultRender)(props.children, 'default_dashboard') }));
+exports.DefaultContainer = DefaultContainer;
+const DefaultTile = (props) => (0, piral_core_1.defaultRender)(props.children);
+exports.DefaultTile = DefaultTile;
 //# sourceMappingURL=default.js.map

package/lib/default.js.map

@@ -1 +1 @@
-{"version":3,"file":"default.js","sourceRoot":"","sources":["../src/default.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,yCAA0D;AAG7C,QAAA,gBAAgB,GAAsC,UAAC,KAAK,IAAK,OAAA,CAC5E,oBAAC,0BAAa,IAAC,IAAI,EAAC,WAAW,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,cAAM,OAAA,0BAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,mBAAmB,CAAC,EAAlD,CAAkD,GAAI,CACnH,EAF6E,CAE7E,CAAC;AAEW,QAAA,WAAW,GAAiC,UAAC,KAAK,IAAK,OAAA,0BAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,EAA7B,CAA6B,CAAC"}
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../src/default.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,2CAA0D;AAGnD,MAAM,gBAAgB,GAAsC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC5E,oBAAC,0BAAa,IAAC,IAAI,EAAC,WAAW,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,IAAA,0BAAa,EAAC,KAAK,CAAC,QAAQ,EAAE,mBAAmB,CAAC,GAAI,CACnH,CAAC;AAFW,QAAA,gBAAgB,oBAE3B;AAEK,MAAM,WAAW,GAAiC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAA,0BAAa,EAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AAArF,QAAA,WAAW,eAA0E"}

package/lib/helpers.d.ts

@@ -0,0 +1,11 @@
+import { Dict, GlobalState } from 'piral-core';
+import { InitialTile, TilePreferences, TileRegistration } from './types';
+export declare function getPreferences(defaultPreferences: TilePreferences, customPreferences?: TilePreferences): {
+    initialColumns?: number;
+    initialRows?: number;
+    resizable?: boolean;
+    customProperties?: string[];
+};
+export declare function getTiles(items: Array<InitialTile>, defaultPreferences: TilePreferences): Dict<TileRegistration>;
+export declare function withTiles(tiles: Dict<TileRegistration>): (state: GlobalState) => GlobalState;
+export declare function withRoutes(routes: Array<string>): (state: GlobalState) => GlobalState;

package/lib/helpers.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withRoutes = exports.withTiles = exports.getTiles = exports.getPreferences = void 0;
+const default_1 = require("./default");
+const Dashboard_1 = require("./Dashboard");
+function getPreferences(defaultPreferences, customPreferences = {}) {
+    return Object.assign(Object.assign({}, defaultPreferences), customPreferences);
+}
+exports.getPreferences = getPreferences;
+function getTiles(items, defaultPreferences) {
+    const tiles = {};
+    let i = 0;
+    for (const { component, preferences } of items) {
+        tiles[`global-${i++}`] = {
+            pilet: undefined,
+            component,
+            preferences: getPreferences(defaultPreferences, preferences),
+        };
+    }
+    return tiles;
+}
+exports.getTiles = getTiles;
+function withTiles(tiles) {
+    return (state) => (Object.assign(Object.assign({}, state), { components: Object.assign({ DashboardTile: default_1.DefaultTile, DashboardContainer: default_1.DefaultContainer }, state.components), registry: Object.assign(Object.assign({}, state.registry), { tiles }) }));
+}
+exports.withTiles = withTiles;
+function withRoutes(routes) {
+    return (state) => (Object.assign(Object.assign({}, state), { routes: Object.assign(Object.assign({}, state.routes), routes.reduce((newRoutes, route) => {
+            newRoutes[route] = Dashboard_1.Dashboard;
+            return newRoutes;
+        }, {})) }));
+}
+exports.withRoutes = withRoutes;
+//# sourceMappingURL=helpers.js.map

package/lib/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":";;;AACA,uCAA0D;AAC1D,2CAAwC;AAGxC,SAAgB,cAAc,CAAC,kBAAmC,EAAE,oBAAqC,EAAE;IACzG,uCACK,kBAAkB,GAClB,iBAAiB,EACpB;AACJ,CAAC;AALD,wCAKC;AAED,SAAgB,QAAQ,CAAC,KAAyB,EAAE,kBAAmC;IACrF,MAAM,KAAK,GAA2B,EAAE,CAAC;IACzC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEV,KAAK,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,KAAK,EAAE;QAC9C,KAAK,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC,GAAG;YACvB,KAAK,EAAE,SAAS;YAChB,SAAS;YACT,WAAW,EAAE,cAAc,CAAC,kBAAkB,EAAE,WAAW,CAAC;SAC7D,CAAC;KACH;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAbD,4BAaC;AAED,SAAgB,SAAS,CAAC,KAA6B;IACrD,OAAO,CAAC,KAAkB,EAAe,EAAE,CAAC,iCACvC,KAAK,KACR,UAAU,kBACR,aAAa,EAAE,qBAAW,EAC1B,kBAAkB,EAAE,0BAAgB,IACjC,KAAK,CAAC,UAAU,GAErB,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,KAAK,OAEP,CAAC;AACL,CAAC;AAbD,8BAaC;AAED,SAAgB,UAAU,CAAC,MAAqB;IAC9C,OAAO,CAAC,KAAkB,EAAe,EAAE,CAAC,iCACvC,KAAK,KACR,MAAM,kCACD,KAAK,CAAC,MAAM,GACZ,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;YACpC,SAAS,CAAC,KAAK,CAAC,GAAG,qBAAS,CAAC;YAC7B,OAAO,SAAS,CAAC;QACnB,CAAC,EAAE,EAAE,CAAC,KAER,CAAC;AACL,CAAC;AAXD,gCAWC"}

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./create"), exports);
 tslib_1.__exportStar(require("./components"), exports);
 tslib_1.__exportStar(require("./Dashboard"), exports);

package/lib/types.d.ts

@@ -1,6 +1,6 @@
-import { ComponentType } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-import { Dict, WrappedComponent, BaseComponentProps, AnyComponent, BaseRegistration, RegistrationDisposer } from 'piral-core';
+import type { ComponentType, ReactNode } from 'react';
+import type { RouteComponentProps } from 'react-router-dom';
+import type { Dict, WrappedComponent, BaseComponentProps, AnyComponent, BaseRegistration, RegistrationDisposer } from 'piral-core';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletDashboardApi {
     }
@@ -39,7 +39,21 @@ declare module 'piral-core/lib/types/custom' {
         DashboardTile: ComponentType<DashboardTileProps>;
     }
 }
+export interface InitialTile {
+    /**
+     * Defines the component to be used for the tile.
+     */
+    component: ComponentType<BareTileComponentProps>;
+    /**
+     * Optionally sets the preferences for the tile.
+     */
+    preferences?: TilePreferences;
+}
 export interface DashboardContainerProps extends RouteComponentProps {
+    /**
+     * The tiles to display.
+     */
+    children?: ReactNode;
 }
 export interface DashboardTileProps {
     /**
@@ -58,6 +72,10 @@ export interface DashboardTileProps {
      * The provided tile preferences.
      */
     meta: TilePreferences;
+    /**
+     * The content of the tile to display.
+     */
+    children?: ReactNode;
 }
 export interface TileErrorInfoProps {
     /**
@@ -76,6 +94,10 @@ export interface TileErrorInfoProps {
      * The currently used number of rows.
      */
     rows: number;
+    /**
+     * The name of the pilet emitting the error.
+     */
+    pilet?: string;
 }
 export interface BareTileComponentProps {
     /**
@@ -87,7 +109,7 @@ export interface BareTileComponentProps {
      */
     rows: number;
 }
-export declare type TileComponentProps = BaseComponentProps & BareTileComponentProps;
+export type TileComponentProps = BaseComponentProps & BareTileComponentProps;
 export interface PiralCustomTilePreferences {
 }
 export interface TilePreferences extends PiralCustomTilePreferences {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-dashboard",
-  "version": "1.0.0-pre.2296",
+  "version": "1.0.0",
   "description": "Plugin for creating a centralized dashboard in Piral.",
   "keywords": [
     "piral",
@@ -20,11 +20,29 @@
   "module": "esm/index.js",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./lib/index.js"
+    },
+    "./esm/*": {
+      "import": "./esm/*"
+    },
+    "./lib/*": {
+      "require": "./lib/*"
+    },
+    "./_/*": {
+      "import": "./esm/*.js",
+      "require": "./lib/*.js"
+    },
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
   "files": [
     "esm",
     "lib",
-    "src"
+    "src",
+    "piral-dashboard.min.js"
   ],
   "repository": {
     "type": "git",
@@ -34,17 +52,23 @@
     "url": "https://github.com/smapiot/piral/issues"
   },
   "scripts": {
-    "build": "yarn build:commonjs && yarn build:esnext",
+    "cleanup": "rimraf esm lib piral-dashboard.min.js",
+    "build": "yarn build:bundle && yarn build:commonjs && yarn build:esnext",
+    "build:bundle": "esbuild src/index.ts --outfile=piral-dashboard.min.js --bundle --external:piral-core --external:react --minify --global-name=piralDashboard",
     "build:commonjs": "tsc --project tsconfig.json --outDir lib --module commonjs",
     "build:esnext": "tsc --project tsconfig.json --outDir esm --module esnext",
     "typedoc": "typedoc --json ../../../docs/types/piral-dashboard.json src --exclude \"src/**/*.test.*\"",
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "^1.0.0-pre.2296"
+    "@types/react": "^18.0.0",
+    "@types/react-router-dom": "^5.1.6",
+    "piral-core": "^1.0.0",
+    "react": "^18.0.0"
   },
   "peerDependencies": {
-    "piral-core": "0.13.x"
+    "piral-core": "0.14.x || 0.15.x",
+    "react": ">=16.8.0"
   },
-  "gitHead": "8dc47ff93be1eefcc3e226a1e7dd4d58615b4e0c"
+  "gitHead": "67d9a2920bd5231baf10bc87ae8985666b18fa3a"
 }

package/piral-dashboard.min.js

@@ -0,0 +1 @@
+var piralDashboard=(()=>{var q=Object.create;var h=Object.defineProperty,v=Object.defineProperties,B=Object.getOwnPropertyDescriptor,H=Object.getOwnPropertyDescriptors,J=Object.getOwnPropertyNames,S=Object.getOwnPropertySymbols,L=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var I=(e,r,t)=>r in e?h(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,i=(e,r)=>{for(var t in r||(r={}))G.call(r,t)&&I(e,t,r[t]);if(S)for(var t of S(r))M.call(r,t)&&I(e,t,r[t]);return e},s=(e,r)=>v(e,H(r)),F=e=>h(e,"__esModule",{value:!0});var p=(e=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(e,{get:(r,t)=>(typeof require!="undefined"?require:r)[t]}):e)(function(e){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+e+'" is not supported')});var k=(e,r)=>{F(e);for(var t in r)h(e,t,{get:r[t],enumerable:!0})},Q=(e,r,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of J(r))!G.call(e,o)&&o!=="default"&&h(e,o,{get:()=>r[o],enumerable:!(t=B(r,o))||t.enumerable});return e},c=e=>Q(F(h(e!=null?q(L(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);var X={};k(X,{Dashboard:()=>d,PiralDashboardContainer:()=>C,PiralDashboardTile:()=>R,createDashboardApi:()=>W});var y={};k(y,{registerTile:()=>U,unregisterTile:()=>V});var D=c(p("piral-core"));function U(e,r,t){e.dispatch(o=>s(i({},o),{registry:s(i({},o.registry),{tiles:(0,D.withKey)(o.registry.tiles,r,t)})}))}function V(e,r){e.dispatch(t=>s(i({},t),{registry:s(i({},t.registry),{tiles:(0,D.withoutKey)(t.registry.tiles,r)})}))}var l=c(p("piral-core"));var P=c(p("react")),z=c(p("piral-core"));var x=c(p("piral-core")),C=(0,x.getPiralComponent)("DashboardContainer"),R=(0,x.getPiralComponent)("DashboardTile");var d=e=>{let r=(0,z.useGlobalState)(a=>a.registry.tiles),{filter:t=()=>!0}=e,o=Object.keys(r).filter(a=>t(r[a])).map(a=>{let{component:f,preferences:T}=r[a],{initialColumns:m=1,initialRows:g=1,resizable:n=!1}=T;return P.createElement(R,{key:a,columns:m,rows:g,resizable:n,meta:T},P.createElement(f,{columns:m,rows:g}))});return P.createElement(C,s(i({},e),{children:o}))};d.displayName="Dashboard";var E=c(p("react")),b=c(p("piral-core")),K=e=>E.createElement(b.ExtensionSlot,{name:"dashboard",params:e,empty:()=>(0,b.defaultRender)(e.children,"default_dashboard")}),N=e=>(0,b.defaultRender)(e.children);function w(e,r={}){return i(i({},e),r)}function j(e,r){let t={},o=0;for(let{component:a,preferences:f}of e)t[`global-${o++}`]={pilet:void 0,component:a,preferences:w(r,f)};return t}function O(e){return r=>s(i({},r),{components:i({DashboardTile:N,DashboardContainer:K},r.components),registry:s(i({},r.registry),{tiles:e})})}function _(e){return r=>s(i({},r),{routes:i(i({},r.routes),e.reduce((t,o)=>(t[o]=d,t),{}))})}function W(e={}){let{tiles:r=[],defaultPreferences:t={},routes:o=["/"]}=e;return a=>(a.defineActions(y),a.dispatch((0,l.withAll)(O(j(r,t)),(0,l.withRootExtension)("piral-dashboard",d),_(o))),(f,T)=>{let m=T.name,g=0;return{registerTile(n,u,A){typeof n!="string"&&(A=u,u=n,n=g++);let $=(0,l.buildName)(m,n);return a.registerTile($,{pilet:m,component:(0,l.withApi)(a,u,f,"tile"),preferences:w(t,A)}),()=>f.unregisterTile(n)},unregisterTile(n){let u=(0,l.buildName)(m,n);a.unregisterTile(u)}}})}return X;})();

package/src/Dashboard.test.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import create from 'zustand';
+import { render } from '@testing-library/react';
 import { StateContext } from 'piral-core';
-import { Atom, swap, deref } from '@dbeining/react-atom';
 import { Dashboard } from './Dashboard';
 
-const MockDbContainer: React.FC = ({ children }) => <div>{children}</div>;
+const MockDbContainer: React.FC<any> = ({ children }) => <ul>{children}</ul>;
 MockDbContainer.displayName = 'MockDbContainer';
-const MockDbTile: React.FC = ({ children }) => <div>{children}</div>;
+const MockDbTile: React.FC<any> = ({ children }) => <li>{children}</li>;
 MockDbTile.displayName = 'MockDbTile';
 
 function createMockContainer(tiles = {}) {
-  const state = Atom.of({
+  const state = create(() => ({
     components: {
       DashboardContainer: MockDbContainer,
       DashboardTile: MockDbTile,
@@ -18,7 +18,7 @@ function createMockContainer(tiles = {}) {
     registry: {
       tiles,
     },
-  });
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -27,10 +27,10 @@ function createMockContainer(tiles = {}) {
       defineActions() {},
       state,
       readState(read) {
-        return read(deref(state));
+        return read(state.getState());
       },
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
     } as any,
     api: {} as any,
@@ -41,13 +41,13 @@ describe('Piral-Dashboard Dashboard component', () => {
   it('uses container for a connected dashboard', () => {
     const fake: any = {};
     const { context } = createMockContainer();
-    const node = mount(
+    const node = render(
       <StateContext.Provider value={context}>
         <Dashboard {...fake} />
       </StateContext.Provider>,
     );
-    expect(node.find(MockDbContainer).length).toBe(1);
-    expect(node.find(MockDbTile).length).toBe(0);
+    expect(node.getAllByRole('list').length).toBe(1);
+    expect(node.queryByRole('listitem')).toBe(null);
   });
 
   it('uses container and tile for each tile of a connected dashboard', () => {
@@ -62,12 +62,12 @@ describe('Piral-Dashboard Dashboard component', () => {
         preferences: {},
       },
     });
-    const node = mount(
+    const node = render(
       <StateContext.Provider value={context}>
         <Dashboard {...fake} />
       </StateContext.Provider>,
     );
-    expect(node.find(MockDbContainer).length).toBe(1);
-    expect(node.find(MockDbTile).length).toBe(2);
+    expect(node.getAllByRole('list').length).toBe(1);
+    expect(node.getAllByRole('listitem').length).toBe(2);
   });
 });

package/src/Dashboard.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import type { RouteComponentProps } from 'react-router-dom';
 import { useGlobalState } from 'piral-core';
 import { PiralDashboardContainer, PiralDashboardTile } from './components';
 import { TileRegistration } from './types';
@@ -8,6 +8,10 @@ export interface DashboardProps extends RouteComponentProps {
   filter?(tile: TileRegistration): boolean;
 }
 
+/**
+ * The dashboard component. Integrate this as a page or in a component
+ * where dashboard information (tiles) should be shown.
+ */
 export const Dashboard: React.FC<DashboardProps> = (props) => {
   const tiles = useGlobalState((s) => s.registry.tiles);
   const { filter = () => true } = props;

package/src/actions.test.ts

@@ -1,19 +1,20 @@
-import { Atom, deref } from '@dbeining/react-atom';
+import create from 'zustand';
+import { createListener } from 'piral-base';
+import { createActions } from 'piral-core';
 import { registerTile, unregisterTile } from './actions';
-import { createActions, createListener } from 'piral-core';
 
 describe('Dashboard Actions Module', () => {
   it('registerTile and unregisterTile', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: 5,
       registry: {
         foo: 5,
         tiles: {},
       },
-    });
+    }));
     const ctx = createActions(state, createListener({}));
     registerTile(ctx, 'foo', 10);
-    expect(deref(state)).toEqual({
+    expect((state.getState())).toEqual({
       foo: 5,
       registry: {
         foo: 5,
@@ -23,7 +24,7 @@ describe('Dashboard Actions Module', () => {
       },
     });
     unregisterTile(ctx, 'foo');
-    expect(deref(state)).toEqual({
+    expect((state.getState())).toEqual({
       foo: 5,
       registry: {
         foo: 5,

package/src/components.tsx

@@ -1,8 +1,4 @@
-import * as React from 'react';
 import { getPiralComponent } from 'piral-core';
-import { DashboardContainerProps, DashboardTileProps } from './types';
 
-export const PiralDashboardContainer: React.ComponentType<DashboardContainerProps> = getPiralComponent(
-  'DashboardContainer',
-);
-export const PiralDashboardTile: React.ComponentType<DashboardTileProps> = getPiralComponent('DashboardTile');
+export const PiralDashboardContainer = getPiralComponent('DashboardContainer');
+export const PiralDashboardTile = getPiralComponent('DashboardTile');

package/src/create.test.ts

@@ -1,4 +1,4 @@
-import { Atom, swap } from '@dbeining/react-atom';
+import create from 'zustand';
 import { createElement, FC } from 'react';
 import { createDashboardApi } from './create';
 
@@ -6,7 +6,11 @@ const StubComponent: FC = (props) => createElement('div', props);
 StubComponent.displayName = 'StubComponent';
 
 function createMockContainer() {
-  const state = Atom.of({});
+  const state = create(() => ({
+    registry: {
+      extensions: {},
+    },
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -19,7 +23,7 @@ function createMockContainer() {
       },
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
     } as any,
     api: {} as any,

package/src/create.ts

@@ -1,24 +1,18 @@
 import * as actions from './actions';
-import { ComponentType } from 'react';
-import { buildName, withApi, PiralPlugin, Dict } from 'piral-core';
-import { DefaultTile, DefaultContainer } from './default';
-import { PiletDashboardApi, TilePreferences, BareTileComponentProps, TileRegistration } from './types';
-
-export interface InitialTile {
-  /**
-   * Defines the component to be used for the tile.
-   */
-  component: ComponentType<BareTileComponentProps>;
-  /**
-   * Optionally sets the preferences for the tile.
-   */
-  preferences?: TilePreferences;
-}
+import { buildName, withApi, PiralPlugin, withRootExtension, withAll } from 'piral-core';
+import { Dashboard } from './Dashboard';
+import { InitialTile, PiletDashboardApi, TilePreferences } from './types';
+import { getPreferences, getTiles, withRoutes, withTiles } from './helpers';
 
 /**
  * Available configuration options for the dashboard plugin.
  */
 export interface DashboardConfig {
+  /**
+   * Sets the routes where a dashboard should be displayed.
+   * @default ['/']
+   */
+  routes?: Array<string>;
   /**
    * Sets the tiles to be given by the app shell.
    * @default []
@@ -31,49 +25,22 @@ export interface DashboardConfig {
   defaultPreferences?: TilePreferences;
 }
 
-function getPreferences(defaultPreferences: TilePreferences, customPreferences: TilePreferences = {}) {
-  return {
-    ...defaultPreferences,
-    ...customPreferences,
-  };
-}
-
-function getTiles(items: Array<InitialTile>, defaultPreferences: TilePreferences) {
-  const tiles: Dict<TileRegistration> = {};
-  let i = 0;
-
-  for (const { component, preferences } of items) {
-    tiles[`global-${i++}`] = {
-      pilet: undefined,
-      component,
-      preferences: getPreferences(defaultPreferences, preferences),
-    };
-  }
-
-  return tiles;
-}
-
 /**
  * Creates the Pilet API extension for activating dashboard support.
  */
 export function createDashboardApi(config: DashboardConfig = {}): PiralPlugin<PiletDashboardApi> {
-  const { tiles = [], defaultPreferences = {} } = config;
+  const { tiles = [], defaultPreferences = {}, routes = ['/'] } = config;
 
   return (context) => {
     context.defineActions(actions);
 
-    context.dispatch((state) => ({
-      ...state,
-      components: {
-        DashboardTile: DefaultTile,
-        DashboardContainer: DefaultContainer,
-        ...state.components,
-      },
-      registry: {
-        ...state.registry,
-        tiles: getTiles(tiles, defaultPreferences),
-      },
-    }));
+    context.dispatch(
+      withAll(
+        withTiles(getTiles(tiles, defaultPreferences)),
+        withRootExtension('piral-dashboard', Dashboard),
+        withRoutes(routes),
+      ),
+    );
 
     return (api, target) => {
       const pilet = target.name;

package/src/default.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { DefaultContainer } from './default';
 
 jest.mock('piral-core', () => ({
@@ -35,10 +35,10 @@ const state = {
 
 (React as any).useMemo = (cb) => cb();
 
-const StubDashboard: React.FC = () => <div />;
+const StubDashboard: React.FC = () => <div role="dashboard" />;
 StubDashboard.displayName = 'StubDashboard';
 
-const StubTile: React.FC = () => <div />;
+const StubTile: React.FC = () => <div role="tile" />;
 StubTile.displayName = 'StubTile';
 
 describe('Default Dashboard Component', () => {
@@ -47,13 +47,13 @@ describe('Default Dashboard Component', () => {
       component: StubTile,
       preferences: {},
     };
-    const node = mount(
-      <DefaultContainer history={undefined} location={undefined} match={undefined}>
+    const node = render(
+      <DefaultContainer>
         <StubTile />
       </DefaultContainer>,
     );
-    expect(node.find(StubDashboard).length).toBe(0);
-    expect(node.find(StubTile).length).toBe(1);
+    expect(node.queryByRole("dashboard")).toBe(null);
+    expect(node.getAllByRole("tile").length).toBe(1);
   });
 
   it('renders the provided extension in the default case', () => {
@@ -62,12 +62,12 @@ describe('Default Dashboard Component', () => {
         component: StubDashboard,
       },
     ];
-    const node = mount(
-      <DefaultContainer history={undefined} location={undefined} match={undefined}>
+    const node = render(
+      <DefaultContainer>
         <StubTile />
       </DefaultContainer>,
     );
-    expect(node.find(StubTile).length).toBe(0);
-    expect(node.find(StubDashboard).length).toBe(1);
+    expect(node.queryByRole("tile")).toBe(null);
+    expect(node.getAllByRole("dashboard").length).toBe(1);
   });
 });