@rio-cloud/rio-uikit 0.16.1 → 0.16.2-beta.11

package/lib/es/themes/Xmas/styles/rio-xmas.less

@@ -1,36 +1,66 @@
-/* Backgrounds - Map Marker */
+// Theme
+@hasDarkmode: false;
+
+// adding a new xmas map marker
+@color-white: #ffffff;
 @color-map-marker-xmas: #dd0a2c;
 
-.rio-map-marker {
-    &.active {
-        .rio-map-icon {
-            &:before {
-                color: @color-map-marker-xmas;
-            }
-        }
-    }
+@colors-map-marker-custom: {
+  map-marker-xmas: @color-map-marker-xmas;
 }
 
-@rioglyph-truck: "\f17b";
-.rioglyph-truck:before,
-.hover-rioglyph-truck:hover:before {
-	content: "\f17b";
-}
+each(@colors-map-marker-custom, {
+  .bg-@{key} {
+    color: @color-white !important;
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+  .fill-@{key} {
+    fill: @value !important;
+  }
+})
 
-@rioglyph-bus: "\f17b";
-.rioglyph-bus:before,
-.hover-rioglyph-bus:hover:before {
-	content: "\f17b";
-}
+each(@colors-map-marker-custom, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
 
-@rioglyph-van: "\f17b";
-.rioglyph-van:before,
-.hover-rioglyph-van:hover:before {
-	content: "\f17b";
-}
 
-@rioglyph-user: "\f17c";
-.rioglyph-user:before,
-.hover-rioglyph-user:hover:before {
-	content: "\f17c";
-}
+// replacing all TRUCK, BUS, VAN and User icons
+
+// .rio-map-marker {
+//     &.active {
+//         .rio-map-icon {
+//             &:before {
+//                 color: @color-map-marker-xmas;
+//             }
+//         }
+//     }
+// }
+
+// @rioglyph-truck: "\f17b";
+// .rioglyph-truck:before,
+// .hover-rioglyph-truck:hover:before {
+// 	content: "\f17b";
+// }
+
+// @rioglyph-bus: "\f17b";
+// .rioglyph-bus:before,
+// .hover-rioglyph-bus:hover:before {
+// 	content: "\f17b";
+// }
+
+// @rioglyph-van: "\f17b";
+// .rioglyph-van:before,
+// .hover-rioglyph-van:hover:before {
+// 	content: "\f17b";
+// }
+
+// @rioglyph-user: "\f17c";
+// .rioglyph-user:before,
+// .hover-rioglyph-user:hover:before {
+// 	content: "\f17c";
+// }

package/lib/es/types.ts

@@ -74,8 +74,7 @@ export interface ApplicationHeaderProps {
     appMenuItems?: ModulePropTypes[];
     navItems?: ModulePropTypes[];
     actionBarItems: React.ReactNode[];
-    onMount?: Function;
-    onUnmount?: Function;
+    onToggleAppMenu?: (isOpen: boolean) => void;
     className?: string;
 }
 
@@ -674,7 +673,9 @@ export interface FilePickerProps {
     maxSize?: number; // max file size
     onPick: (files: FileList | null) => void;
     className?: string;
-    accept?: string;
+    accept?: {
+        [mimeType: string]: string[];
+    };
     children?: ({ isDragActive }: FilePickerRenderProps) => any;
 }
 
@@ -1082,11 +1083,15 @@ export interface NumberControlProps {
     value?: number;
     step?: number;
     disabled?: boolean;
+    onChange?: (value: number) => void;
     onValueChanged?: (value: number) => void;
     bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
+    digitPrecision?: number;
+    placeholder?: string;
+    ref?: React.MutableRefObject<object>;
 }
 
 export interface NumberInputProps {
@@ -1094,13 +1099,16 @@ export interface NumberInputProps {
     max?: number;
     value?: number;
     step?: number;
-    type?: string;
     disabled?: boolean;
+    onChange?: (value: number) => void;
     onValueChanged?: (value: number) => void;
     bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
+    placeholder?: string;
+    digitPrecision?: number;
+    ref?: React.MutableRefObject<object>;
 }
 
 // O --------------------------------------------------------------------------------------------------
@@ -1520,6 +1528,7 @@ export interface SelectProps {
 export interface SidebarProps {
     backdropClassName?: string;
     bodyClassName?: string;
+    bodyRef?: React.MutableRefObject<object>;
     className?: string;
     closed?: boolean;
     disableClose?: boolean;
@@ -2031,7 +2040,7 @@ export interface TreeItemName {
 export interface TreeItem {
     id: string;
     name: string | TreeItemName;
-    info?: string;
+    info?: string | React.ReactNode;
     type: string;
     groupIds?: string[];
     className?: string;
@@ -2192,3 +2201,19 @@ export type UseSessionStorage = (key: string, defaultValue: any) => [any, Functi
 export type UseTimeout = (callback: () => void, delay?: number) => React.MutableRefObject<object>;
 
 export type UseWindowResize = (callback: () => void, timeout?: number) => void;
+
+export type UseDarkMode = () => boolean;
+
+export type UseMutationObserver = (
+    targetElement: HTMLElement | React.MutableRefObject<object> | null | undefined,
+    callback: MutationCallback | undefined,
+    options?: {
+        attributes?: boolean;
+        childList?: boolean;
+        subtree?: boolean;
+    }
+) => void;
+
+export type UseScrollPosition = (
+    target: Window | HTMLBodyElement | React.ReactElement | React.MutableRefObject<object> | undefined
+) => number;

package/lib/es/useDarkMode.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/useDarkMode' {
+    import { UseDarkMode } from './types';
+    export default UseDarkMode;
+}

package/lib/es/useDarkMode.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useDarkMode2["default"];
+  }
+});
+var _useDarkMode2 = _interopRequireDefault(require("./hooks/useDarkMode"));

package/lib/es/useMutationObserver.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/useMutationObserver' {
+    import { UseMutationObserver } from './types';
+    export default UseMutationObserver;
+}

package/lib/es/useMutationObserver.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useMutationObserver2["default"];
+  }
+});
+var _useMutationObserver2 = _interopRequireDefault(require("./hooks/useMutationObserver"));

package/lib/es/useScrollPosition.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/useScrollPosition' {
+    import { UseScrollPosition } from './types';
+    export default UseScrollPosition;
+}

package/lib/es/useScrollPosition.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useScrollPosition2["default"];
+  }
+});
+var _useScrollPosition2 = _interopRequireDefault(require("./hooks/useScrollPosition"));

package/lib/es/utils/colorScheme.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setColorScheme = exports.getColorScheme = exports.THEME_SYSTEM = exports.THEME_LIGHT = exports.THEME_DEFAULT = exports.THEME_DATA_ATTRIBUTE = exports.THEME_DARK = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var COOKIE_NAME = 'uikit-color-scheme';
+var THEME_DATA_ATTRIBUTE = 'data-theme';
+exports.THEME_DATA_ATTRIBUTE = THEME_DATA_ATTRIBUTE;
+var PATH = '/';
+var DOMAIN = '.rio.cloud';
+var EXPIRATION_DATE = 'Thu, 18 Dec 2030 12:00:00 UTC';
+var THEME_DEFAULT = 'default';
+exports.THEME_DEFAULT = THEME_DEFAULT;
+var THEME_SYSTEM = 'system';
+exports.THEME_SYSTEM = THEME_SYSTEM;
+var THEME_LIGHT = 'light';
+exports.THEME_LIGHT = THEME_LIGHT;
+var THEME_DARK = 'dark';
+exports.THEME_DARK = THEME_DARK;
+var getColorScheme = function getColorScheme() {
+  return readColorSchemeFromCookie();
+};
+exports.getColorScheme = getColorScheme;
+var setColorScheme = function setColorScheme(scheme) {
+  return writeColorSchemeToCookie(scheme);
+};
+exports.setColorScheme = setColorScheme;
+var readColorSchemeFromCookie = function readColorSchemeFromCookie() {
+  var decodedCookie = decodeURIComponent(document.cookie);
+  console.log(decodedCookie);
+  var _decodedCookie$split$ = decodedCookie.split(';').filter(function (entry) {
+      return entry.includes(COOKIE_NAME);
+    }),
+    _decodedCookie$split$2 = (0, _slicedToArray2["default"])(_decodedCookie$split$, 1),
+    uikitCname = _decodedCookie$split$2[0];
+  if (!uikitCname) {
+    return;
+  }
+  var _uikitCname$split = uikitCname.split('='),
+    _uikitCname$split2 = (0, _slicedToArray2["default"])(_uikitCname$split, 2),
+    colorScheme = _uikitCname$split2[1];
+  console.log("readColorSchemeFromCookie: ".concat(colorScheme));
+  if (!colorScheme) {
+    return;
+  }
+  var html = document.documentElement;
+  if (colorScheme === THEME_DEFAULT || colorScheme === THEME_SYSTEM) {
+    html.removeAttribute(THEME_DATA_ATTRIBUTE);
+    return colorScheme;
+  }
+  if (colorScheme === THEME_LIGHT || colorScheme === THEME_DARK) {
+    html.setAttribute(THEME_DATA_ATTRIBUTE, colorScheme);
+    return colorScheme;
+  }
+};
+
+// This should be done by a RIO service like User Profile SPA using a theme switcher component from the uikit
+// where this function is referenced
+var writeColorSchemeToCookie = function writeColorSchemeToCookie(scheme) {
+  var _window;
+  var isDevEnv = (_window = window) === null || _window === void 0 ? void 0 : _window.location.host.startsWith('localhost');
+  var newCookieValues = encodeURIComponent(scheme);
+  var cookie = "".concat(COOKIE_NAME, "=").concat(newCookieValues, ";domain=").concat(isDevEnv ? 'localhost' : DOMAIN, ";expires=").concat(EXPIRATION_DATE, ";path=").concat(PATH);
+  console.log("writeColorSchemeToCookie: ".concat(cookie));
+  document.cookie = cookie;
+};

package/lib/es/utils/init.js

@@ -11,6 +11,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
 var _process = _interopRequireDefault(require("process"));
 var _deviceUtils = require("./deviceUtils");
+var _colorScheme = require("./colorScheme");
 var _version = _interopRequireDefault(require("../version.json"));
 var uikitVersion = _version["default"].version;
 
@@ -50,41 +51,39 @@ var checkForReleaseVersion = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var remoteVersionsListUrl, response, data;
     return _regenerator["default"].wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            if (isProdEnv()) {
-              _context.next = 2;
-              break;
-            }
-            return _context.abrupt("return");
-          case 2:
-            remoteVersionsListUrl = 'https://uikit.developers.rio.cloud/versionsList.json';
-            _context.prev = 3;
-            _context.next = 6;
-            return fetch(remoteVersionsListUrl, {
-              method: 'get'
-            });
-          case 6:
-            response = _context.sent;
-            _context.next = 9;
-            return response.json();
-          case 9:
-            data = _context.sent;
-            if (data.latest_release !== uikitVersion) {
-              console.log("\uD83C\uDD95 UIKIT version ".concat(data.latest_release, " is the latest released version! Your are using ").concat(uikitVersion));
-            }
-            _context.next = 16;
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (isProdEnv()) {
+            _context.next = 2;
             break;
-          case 13:
-            _context.prev = 13;
-            _context.t0 = _context["catch"](3);
-            // console.warn(error);
-            console.warn("Faild to fetch versionsList from ".concat(remoteVersionsListUrl));
-          case 16:
-          case "end":
-            return _context.stop();
-        }
+          }
+          return _context.abrupt("return");
+        case 2:
+          remoteVersionsListUrl = 'https://uikit.developers.rio.cloud/versionsList.json';
+          _context.prev = 3;
+          _context.next = 6;
+          return fetch(remoteVersionsListUrl, {
+            method: 'get'
+          });
+        case 6:
+          response = _context.sent;
+          _context.next = 9;
+          return response.json();
+        case 9:
+          data = _context.sent;
+          if (data.latest_release !== uikitVersion) {
+            console.log("\uD83C\uDD95 UIKIT version ".concat(data.latest_release, " is the latest released version! Your are using ").concat(uikitVersion));
+          }
+          _context.next = 16;
+          break;
+        case 13:
+          _context.prev = 13;
+          _context.t0 = _context["catch"](3);
+          // console.warn(error);
+          console.warn("Faild to fetch versionsList from ".concat(remoteVersionsListUrl));
+        case 16:
+        case "end":
+          return _context.stop();
       }
     }, _callee, null, [[3, 13]]);
   }));
@@ -129,6 +128,7 @@ var initDocumentBootstrapping = function initDocumentBootstrapping(document) {
     html.classList.add('window-iframe');
   }
   if (!isTestEnv()) {
+    (0, _colorScheme.getColorScheme)();
     printPoweredByRIO();
     checkForReleaseVersion();
     checkMatchingUkitVersions();

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.16.1"
+    "version": "0.16.2-beta.11"
 }

package/mapIndex.js

@@ -16,7 +16,7 @@ import { default as _ClusterLayer } from './components/map/components/features/l
 import { default as _SimpleClusterLayer } from './components/map/components/features/layers/clustering/SimpleClusterLayer';
 import { default as _MarkerLayer } from './components/map/components/features/layers/MarkerLayer';
 import { default as _TrafficLayer } from './components/map/components/features/layers/TrafficLayer';
-import { default as _TruckLayer } from './components/map/components/features/layers/TruckLayer';
+import { default as _TruckLayer } from './components/map/components/features/layers/RoadRestrictionLayer';
 import { default as _IncidentsLayer } from './components/map/components/features/layers/IncidentsLayer';
 import { default as _Circle } from './components/map/components/features/basics/Circle';
 import { default as _MapSettings } from './components/map/components/features/MapSettings';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.1",
+    "version": "0.16.2-beta.11",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -42,61 +42,62 @@
         "**/*.*"
     ],
     "devDependencies": {
-        "@babel/cli": "7.19.3",
-        "@babel/core": "7.19.6",
+        "@babel/cli": "7.20.7",
+        "@babel/core": "7.20.12",
         "@babel/eslint-parser": "7.19.1",
         "@babel/plugin-proposal-class-properties": "7.18.6",
-        "@babel/plugin-proposal-object-rest-spread": "7.19.4",
+        "@babel/plugin-proposal-object-rest-spread": "7.20.7",
         "@babel/plugin-syntax-dynamic-import": "7.8.3",
-        "@babel/plugin-transform-modules-commonjs": "7.19.6",
+        "@babel/plugin-transform-modules-commonjs": "7.20.11",
         "@babel/plugin-transform-react-display-name": "7.18.6",
-        "@babel/plugin-transform-react-jsx": "7.19.0",
+        "@babel/plugin-transform-react-jsx": "7.20.7",
         "@babel/plugin-transform-runtime": "7.19.6",
-        "@babel/preset-env": "7.19.4",
+        "@babel/preset-env": "7.20.2",
         "@babel/preset-react": "7.18.6",
-        "@babel/runtime": "7.19.4",
+        "@babel/runtime": "7.20.7",
         "@testing-library/jest-dom": "5.16.5",
         "@testing-library/react": "12.1.5",
         "@testing-library/user-event": "13.5.0",
-        "@types/lodash": "4.14.186",
-        "@types/react": "18.0.21",
-        "@types/react-redux": "7.1.24",
+        "@types/lodash": "4.14.191",
+        "@types/react": "18.0.26",
+        "@types/react-redux": "7.1.25",
         "@types/resize-observer-browser": "0.1.7",
-        "@typescript-eslint/eslint-plugin": "5.40.1",
-        "@typescript-eslint/parser": "5.40.1",
-        "@vitejs/plugin-react": "^2.1.0",
-        "@vitest/coverage-c8": "0.24.3",
-        "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-        "autoprefixer": "10.4.12",
-        "base64-font-loader": "0.0.4",
+        "@typescript-eslint/eslint-plugin": "5.48.1",
+        "@typescript-eslint/parser": "5.48.1",
+        "@vitejs/plugin-react": "3.0.1",
+        "@vitest/coverage-c8": "0.27.1",
+        "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
+        "autoprefixer": "10.4.13",
         "copyfiles": "2.4.1",
         "dotenv": "16.0.3",
         "enzyme": "3.11.0",
-        "enzyme-adapter-react-16": "1.15.6",
-        "eslint": "8.26.0",
-        "eslint-config-prettier": "8.5.0",
+        "enzyme-adapter-react-16": "1.15.7",
+        "eslint": "8.31.0",
+        "eslint-config-prettier": "8.6.0",
         "eslint-plugin-compat": "4.0.2",
         "eslint-plugin-getsentry": "2.0.0",
         "eslint-plugin-import": "2.26.0",
         "eslint-plugin-prefer-arrow": "1.2.3",
         "eslint-plugin-prettier": "4.2.1",
-        "eslint-plugin-react": "7.31.10",
+        "eslint-plugin-react": "7.32.0",
         "eslint-plugin-react-hooks": "4.6.0",
         "jsdom": "20.0.1",
         "jsdom-global": "3.0.2",
         "less": "4.1.3",
         "license-checker": "25.0.1",
-        "postcss-preset-env": "7.8.2",
+        "postcss": "^8.4.21",
+        "postcss-preset-env": "7.8.3",
         "postcss-short": "5.0.0",
-        "prettier": "2.7.1",
+        "postcss-variable-compress": "^2.0.1",
+        "prettier": "2.8.2",
         "react": "17.0.2",
         "react-dom": "17.0.2",
-        "react-intl": "6.2.1",
+        "react-intl": "6.2.5",
         "rollup-plugin-copy": "^3.4.0",
         "strip-ansi": "7.0.1",
-        "ttf2woff2": "4.0.5",
-        "vite": "3.1.8",
-        "vitest": "0.24.3",
+        "ttf2woff2": "5.0.0",
+        "vite": "4.0.4",
+        "vitest": "^0.24.3",
         "webfont": "11.2.26",
         "webfonts-generator": "github:rio-cloud/webfonts-generator"
     },
@@ -105,9 +106,9 @@
         "react-dom": ">=17.0.0"
     },
     "dependencies": {
-        "@dnd-kit/core": "6.0.5",
-        "@dnd-kit/modifiers": "6.0.0",
-        "@dnd-kit/sortable": "7.0.1",
+        "@dnd-kit/core": "6.0.7",
+        "@dnd-kit/modifiers": "6.0.1",
+        "@dnd-kit/sortable": "7.0.2",
         "@popperjs/core": "2.11.6",
         "classnames": "2.3.2",
         "events": "3.3.0",
@@ -125,8 +126,8 @@
         "react-notifications": "1.7.4",
         "react-onclickoutside": "6.12.2",
         "react-popper": "2.3.0",
-        "react-responsive": "9.0.0",
+        "react-responsive": "9.0.2",
         "react-transition-group": "4.4.5",
-        "recharts": "2.1.15"
+        "recharts": "2.3.1"
     }
 }

package/styles/components/Activity.less

@@ -1,7 +1,7 @@
 .activity {
   align-items: center;
   border-radius: @border-radius-round;
-  color: @color-white;
+  color: var(--color-white);
   display: inline-flex;
   font-weight: @font-normal;
 
@@ -23,34 +23,33 @@
   }
 
   &.activity-available {
-    background: darken(@color-status-available, 5%);
-
+    background-color: .hslb(@color-status-available-hsl, '-', '5%')[@result];
     .activity-icon {
-      background: @color-status-available;
+      background: var(--color-status-available);
     }
   }
 
   &.activity-driving {
-    background: darken(@color-status-driving, 5%);
+    background-color: .hslb(@color-status-driving-hsl, '-', '5%')[@result];
 
     .activity-icon {
-      background: @color-status-driving;
+      background: var(--color-status-driving);
     }
   }
 
   &.activity-resting {
-    background: darken(@color-status-resting, 5%);
+    background-color: .hslb(@color-status-resting-hsl, '-', '5%')[@result];
 
     .activity-icon {
-      background: @color-status-resting;
+      background: var(--color-status-resting);
     }
   }
 
   &.activity-working {
-    background: darken(@color-status-working, 5%);
+    background-color: .hslb(@color-status-working-hsl, '-', '5%')[@result];
 
     .activity-icon {
-      background: @color-status-working;
+      background: var(--color-status-working);
     }
   }