@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.d.ts

@@ -17,13 +17,13 @@ export type VolkswagenApplicationHeaderProps = ApplicationHeaderProps & {
 };
 export declare const VolkswagenApplicationHeader: React.ForwardRefExoticComponent<ApplicationHeaderProps & {
     homeRoute?: React.ReactNode;
-    appMenuItems?: ModuleProps[] | undefined;
+    appMenuItems?: ModuleProps[];
     appNavigator?: React.ReactNode;
-    appNavigatorClassName?: string | undefined;
-    navItems?: ModuleProps[] | undefined;
-    actionBarItems?: React.ReactNode[] | undefined;
-    onMount?: VoidFunction | undefined;
-    onUnmount?: VoidFunction | undefined;
-    className?: string | undefined;
+    appNavigatorClassName?: string;
+    navItems?: ModuleProps[];
+    actionBarItems?: React.ReactNode[];
+    onMount?: VoidFunction;
+    onUnmount?: VoidFunction;
+    className?: string;
 } & React.RefAttributes<HTMLElement>>;
 export default VolkswagenApplicationHeader;

package/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import { forwardRef } from 'react';
@@ -6,8 +5,8 @@ import isEmpty from 'lodash/fp/isEmpty';
 import classNames from 'classnames';
 import ApplicationActionBar from '../../../../components/applicationHeader/ApplicationActionBar';
 export const VolkswagenApplicationHeader = forwardRef((props, ref) => {
-    const { homeRoute = '', appNavigator, appNavigatorClassName, appMenuItems, navItems = [], actionBarItems = [], onMount = () => { }, onUnmount = () => { }, className = '' } = props, remainingProps = __rest(props, ["homeRoute", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems", "onMount", "onUnmount", "className"]);
+    const { homeRoute = '', appNavigator, appNavigatorClassName, appMenuItems, navItems = [], actionBarItems = [], onMount = () => { }, onUnmount = () => { }, className = '', ...remainingProps } = props;
     const wrapperClassNames = classNames('ApplicationHeader VolkswagenApplicationHeader', 'user-select-none', className && className);
-    return (_jsx("nav", Object.assign({}, remainingProps, { className: wrapperClassNames, ref: ref }, { children: _jsxs("div", Object.assign({ className: 'width-100pct' }, { children: [_jsx("div", Object.assign({ className: 'brand' }, { children: _jsx("div", Object.assign({ className: 'logo' }, { children: homeRoute })) })), isEmpty(navItems) && _jsx("ul", { className: 'SubmoduleNavigation nav' }), !isEmpty(navItems) && (_jsx("ul", Object.assign({ className: 'SubmoduleNavigation nav' }, { children: navItems.map(navItem => (_jsx("li", Object.assign({ className: 'submodule', "data-nav-item-key": navItem.key }, { children: navItem.route }), navItem.key))) }))), _jsx(ApplicationActionBar, { items: actionBarItems })] })) })));
+    return (_jsx("nav", { ...remainingProps, className: wrapperClassNames, ref: ref, children: _jsxs("div", { className: 'width-100pct', children: [_jsx("div", { className: 'brand', children: _jsx("div", { className: 'logo', children: homeRoute }) }), isEmpty(navItems) && _jsx("ul", { className: 'SubmoduleNavigation nav' }), !isEmpty(navItems) && (_jsx("ul", { className: 'SubmoduleNavigation nav', children: navItems.map(navItem => (_jsx("li", { className: 'submodule', "data-nav-item-key": navItem.key, children: navItem.route }, navItem.key))) })), _jsx(ApplicationActionBar, { items: actionBarItems })] }) }));
 });
 export default VolkswagenApplicationHeader;

package/useToggle.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useToggle';
+export * from './hooks/useToggle';

package/useToggle.js

@@ -0,0 +1,2 @@
+export { default } from './hooks/useToggle';
+export * from './hooks/useToggle';

package/utils/colorScheme.js

@@ -19,7 +19,7 @@ const updateHtmlScheme = (scheme) => {
 const getSchemeFromCookie = () => {
     const decodedCookie = decodeURIComponent(document.cookie);
     const find = decodedCookie.split(';').find(entry => entry.includes(COOKIE_NAME));
-    return find === null || find === void 0 ? void 0 : find.split('=')[1];
+    return find?.split('=')[1];
 };
 /**
  * Returns the desired color scheme based on the user's cookie.
@@ -66,12 +66,11 @@ export const setColorScheme = (scheme) => {
  */
 export const listenForSchemeChange = () => {
     window.addEventListener('message', ({ data }) => {
-        var _a;
         if (data === THEME_CHANGE_EVENT) {
             getColorScheme();
             // Re-send the event to all iframes that might not be notified yet
             for (const iframe of document.getElementsByTagName('iframe')) {
-                (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(THEME_CHANGE_EVENT, '*');
+                iframe.contentWindow?.postMessage(THEME_CHANGE_EVENT, '*');
             }
         }
     }, false);

package/utils/darkModeCDN.js

@@ -42,7 +42,7 @@ const listenForCookieChange = () => {
             readColorSchemeFromCookie();
         }
     };
-    window === null || window === void 0 ? void 0 : window.addEventListener('message', eventHandler, false);
+    window?.addEventListener('message', eventHandler, false);
 };
 readColorSchemeFromCookie();
 listenForCookieChange();

package/utils/deviceUtils.js

@@ -1,21 +1,20 @@
 import { cssua } from './cssuseragent';
 // As "cssuseragent" is accessing the html dom object directly without checking whether it exists or not,
 // we need to initialize only when html really exists. This avoids issues when running the UIKIT in a web-worker
-if (document === null || document === void 0 ? void 0 : document.documentElement) {
+if (document?.documentElement) {
     cssua(document.documentElement, navigator.userAgent, navigator.standalone);
 }
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
 const isDefined = (val) => val !== undefined && val !== null;
 // see https://patrickhlauke.github.io/touch/touchscreen-detection/ for reference
 export const hasTouch = () => {
-    var _a;
     if (window.PointerEvent && isDefined(navigator.maxTouchPoints)) {
         // if Pointer Events are supported, just check maxTouchPoints
         if (navigator.maxTouchPoints > 0) {
             return true;
         }
     }
-    else if ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(any-pointer:coarse)').matches) {
+    else if (window.matchMedia?.('(any-pointer:coarse)').matches) {
         // no Pointer Events...
         // check for any-pointer:coarse which mostly means touchscreen
         return true;
@@ -33,9 +32,9 @@ export const SCREEN_MD = 992;
 export const SCREEN_LG = 1200;
 export const SCREEN_XL = 1700;
 export const isMobileScreen = () => window.matchMedia(`(max-width: ${MOBILE_SCREEN}px)`).matches;
-export const isMobile = () => document === null || document === void 0 ? void 0 : document.documentElement.classList.contains('ua-mobile');
-export const isDesktop = () => document === null || document === void 0 ? void 0 : document.documentElement.classList.contains('ua-desktop');
-export const isMac = () => document === null || document === void 0 ? void 0 : document.documentElement.classList.contains('ua-desktop-macintosh');
+export const isMobile = () => document?.documentElement.classList.contains('ua-mobile');
+export const isDesktop = () => document?.documentElement.classList.contains('ua-desktop');
+export const isMac = () => document?.documentElement.classList.contains('ua-desktop-macintosh');
 export const isRetinaDevice = () => window.devicePixelRatio > 1;
 export const inIframe = () => {
     try {

package/utils/init/checkForReleaseVersion.d.ts

@@ -0,0 +1 @@
+export declare const checkForReleaseVersion: () => Promise<void>;

package/utils/init/checkForReleaseVersion.js

@@ -0,0 +1,17 @@
+import { version } from '../../version.json';
+import { getConsoleStyle } from './styledLogs';
+const versionsListUrl = 'https://uikit.developers.rio.cloud/versionsList.json';
+export const checkForReleaseVersion = async () => {
+    const logStyled = (message) => console.log('%c%s', getConsoleStyle(), message);
+    try {
+        const response = await fetch(versionsListUrl);
+        const { latest_release } = await response.json();
+        if (latest_release > version) {
+            logStyled(`🆕 You are using version ${version} of the UIKIT while the latest released version is ` +
+                `${latest_release}. Please consider updating asap.`);
+        }
+    }
+    catch (error) {
+        logStyled('Failed to fetch UIKIT version list.');
+    }
+};

package/utils/init/doNotUseTailwind.d.ts

@@ -0,0 +1 @@
+export declare const doNotUseTailwind: () => Promise<boolean>;

package/utils/init/doNotUseTailwind.js

@@ -0,0 +1,53 @@
+import { getConsoleStyle } from './styledLogs';
+export const doNotUseTailwind = async () => {
+    // Detect Tailwind CSS in linked stylesheets
+    const links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (const link of links) {
+        try {
+            const response = await fetch(link.href);
+            const cssText = await response.text();
+            if (cssText.includes('--tw')) {
+                return true; // Tailwind detected
+            }
+        }
+        catch (error) {
+            console.warn(`Failed to fetch CSS file: ${link.href}`, error);
+        }
+    }
+    // Detect Tailwind CSS in <style> tags
+    const styleTags = document.querySelectorAll('style');
+    for (const style of styleTags) {
+        if (style.textContent?.includes('--tw')) {
+            return true; // Tailwind detected
+        }
+    }
+    return false; // Tailwind not detected
+};
+// Global flag to track if Tailwind has been detected
+let tailwindDetected = false;
+// Initial detection of Tailwind CSS
+(async () => {
+    try {
+        tailwindDetected = await doNotUseTailwind();
+    }
+    catch (error) {
+        console.error('Error during Tailwind detection:', error);
+    }
+})();
+// Repeatedly log messages every 10 seconds if Tailwind was detected
+setInterval(() => {
+    if (tailwindDetected) {
+        const message = [
+            'TAILWIND DETECTED!!!',
+            'Using Tailwind CSS in combination with the RIO UIKIT is strongly discouraged because it can lead to significant design and development issues.',
+            'The RIO UIKIT is a component-driven design system with carefully crafted styles to ensure consistent branding and user experience.',
+            'Tailwind CSS, as a utility-first framework, introduces inline styling that can conflict with the RIO UIKIT’s predefined component styles.',
+            'This can result in overridden styles, broken layouts, inconsistent spacings, inconsistent design language, and increased maintenance complexity.',
+            'Tailwind’s global reset styles may also disrupt the base styles of the RIO UIKIT, causing unintended visual changes.',
+            'Furthermore, mixing the two systems creates unnecessary redundancy, increases CSS bundle size, and complicates debugging and future updates.',
+            'To ensure a cohesive, maintainable, and professional design system, it is essential to rely solely on the RIO UIKIT and its customization options rather than introducing conflicting styling frameworks.',
+            'WE MAY TECHNICALLY DISABLE TAILWIND FUNCTIONALITY IN THE FUTURE.\nPLEASE DO NOT USE TAILWIND!',
+        ].join('\n\n');
+        console.warn('%c%s', getConsoleStyle(), message);
+    }
+}, 10_000);

package/utils/init/initCSS.js

@@ -6,14 +6,13 @@ const BRANDS = ['rio', 'man', 'vw', 'scania', 'traton'];
 const isValidBrand = (input) => BRANDS.includes(input);
 const getBrand = (input) => (isValidBrand(input) ? input : 'rio');
 export const initCSS = () => {
-    var _a;
     if (!window.CSS || !window.CSS.supports || !window.CSS.supports('gap: 1px')) {
         document.documentElement.classList.add('css-no-gap');
     }
     if (isInIframe) {
         document.documentElement.classList.add('window-iframe');
     }
-    if ((_a = document.title) === null || _a === void 0 ? void 0 : _a.includes('UIKIT Demo')) {
+    if (document.title?.includes('UIKIT Demo')) {
         return;
     }
     debug('Checking for UIKIT CSS in document head.');

package/utils/init/initDocumentBootstrapping.js

@@ -1,39 +1,35 @@
-import { __awaiter } from "tslib";
 import { getColorScheme, listenForSchemeChange } from '../colorScheme';
-import { version } from '../../version.json';
-import { isProd, isTest } from './initConfig';
-import { printPoweredByRIO } from './printPoweredByRIO';
+import { isTest, isInIframe } from './initConfig';
+import { usedUikitVersion } from './usedUikitVersion';
+import { weAreHiring } from './weAreHiring';
+import { doNotUseTailwind } from './doNotUseTailwind';
 import { checkCSSVersion, initCSS } from './initCSS';
-const versionsListUrl = 'https://uikit.developers.rio.cloud/versionsList.json';
-const checkForReleaseVersion = () => __awaiter(void 0, void 0, void 0, function* () {
-    if (!isProd) {
-        return;
-    }
-    try {
-        const response = yield fetch(versionsListUrl);
-        const { latest_release } = yield response.json();
-        if (latest_release > version) {
-            console.log(`🆕 You are using version ${version} of the UIKIT while the latest released version is` +
-                ` ${latest_release}. Please consider updating.`);
-        }
-    }
-    catch (error) {
-        console.debug('Failed to fetch UIKIT version list.');
-    }
-});
-export const initDocumentBootstrapping = () => __awaiter(void 0, void 0, void 0, function* () {
+import { checkForReleaseVersion } from './checkForReleaseVersion';
+import { getConsoleStyle } from './styledLogs';
+export const initDocumentBootstrapping = async () => {
     if (!document || !document.documentElement) {
         return;
     }
+    // Initialize the CSS setup
     initCSS();
     if (!isTest) {
-        console.group('UIKIT');
-        console.log(`Init UIKIT for ${document.location.href}.`);
+        // Handle the current color scheme (e.g., light/dark mode)
         getColorScheme();
         listenForSchemeChange();
-        printPoweredByRIO();
-        yield checkForReleaseVersion();
+        // Verify the UIKIT version of the application
+        await checkForReleaseVersion();
+        // Ensure the correct CSS version is being used
         checkCSSVersion();
-        console.groupEnd();
+        if (!isInIframe) {
+            const logStyled = (message) => console.log('%c%s', getConsoleStyle(), message);
+            logStyled('- - - - - - - - - - - - - - - - - -');
+            // Log or validate the UI Kit version
+            usedUikitVersion();
+            // Show a hiring message
+            weAreHiring();
+            logStyled('- - - - - - - - - - - - - - - - - -');
+        }
     }
-});
+    // Enforce the rule that Tailwind CSS should not be used
+    await doNotUseTailwind();
+};

package/utils/init/styledLogs.d.ts

@@ -0,0 +1,3 @@
+export declare const getConsoleStyle: (params?: {
+    isBold?: boolean;
+}) => string;

package/utils/init/styledLogs.js

@@ -0,0 +1,3 @@
+export const getConsoleStyle = (params) => {
+    return `color: #697a8b; ${params?.isBold ? 'font-weight: 800' : ''}`;
+};

package/utils/init/usedUikitVersion.d.ts

@@ -0,0 +1 @@
+export declare const usedUikitVersion: () => void;

package/utils/init/usedUikitVersion.js

@@ -0,0 +1,7 @@
+import { version } from '../../version.json';
+import { getConsoleStyle } from './styledLogs';
+const logStyled = (message) => console.log('%c%s', getConsoleStyle(), message);
+export const usedUikitVersion = () => {
+    const message = `RIO UIKIT Version ${version}\nhttps://uikit.developers.rio.cloud`;
+    logStyled(message);
+};

package/utils/init/weAreHiring.d.ts

@@ -0,0 +1 @@
+export declare const weAreHiring: () => void;

package/utils/init/weAreHiring.js

@@ -0,0 +1,6 @@
+import { getConsoleStyle } from './styledLogs';
+const logStyled = (message) => console.log('%c%s', getConsoleStyle(), message);
+export const weAreHiring = () => {
+    const message = 'You are a Developer? RIO is hiring!\nhttps://company.rio.cloud/en/career/jobs';
+    logStyled(message);
+};

package/utils/mergeRefs.d.ts

@@ -1,3 +1,3 @@
-import React, { type Ref } from 'react';
-declare const mergeRefs: <T>(refs: React.Ref<T>[]) => React.Ref<T>;
+import { type Ref } from 'react';
+declare const mergeRefs: <T>(refs: Ref<T>[]) => Ref<T>;
 export default mergeRefs;

package/utils/mergeRefs.js

@@ -1,5 +1,3 @@
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 // Utility function to merge multiple refs
 const mergeRefs = (refs) => {
     return (value) => {

package/utils/routeUtils.d.ts

@@ -12,4 +12,4 @@ export declare const parseSorting: (sortValueShort: string) => {
     sortDir: "desc" | "asc";
 };
 export declare const mapColumnsSettingsToStrings: ({ columnOrder, hiddenColumns, columnsDetails, }: ColumnsSettings) => string[];
-export declare const parseColumnsSettingsStrings: (settings: string[], defaultColumnsDetails: ColumnsSettings['columnsDetails']) => ColumnsSettings;
+export declare const parseColumnsSettingsStrings: (settings: string[], defaultColumnsDetails: ColumnsSettings["columnsDetails"]) => ColumnsSettings;

package/utils/routeUtils.js

@@ -25,7 +25,7 @@ export const parseColumnsSettingsStrings = (settings, defaultColumnsDetails) =>
     const columns = {
         columnOrder: [],
         hiddenColumns: [],
-        columnsDetails: Object.assign({}, defaultColumnsDetails),
+        columnsDetails: { ...defaultColumnsDetails },
     };
     settings.map(setting => {
         const [column, columnWidth] = setting.split(':');
@@ -34,11 +34,11 @@ export const parseColumnsSettingsStrings = (settings, defaultColumnsDetails) =>
         if (columnWidth) {
             const width = parseInt(columnWidth, 10);
             if (isFinite(width)) {
-                columns.columnsDetails[columnKey] = Object.assign(Object.assign({}, columns.columnsDetails[columnKey]), { width });
+                columns.columnsDetails[columnKey] = { ...columns.columnsDetails[columnKey], width };
             }
         }
         else {
-            columns.columnsDetails[columnKey] = Object.assign({}, defaultColumnsDetails[columnKey]);
+            columns.columnsDetails[columnKey] = { ...defaultColumnsDetails[columnKey] };
         }
         if (column.startsWith('-')) {
             columns.hiddenColumns = [...columns.hiddenColumns, columnKey];

package/utils/urlFeatureToggles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="lodash" />
 export declare const DEFAULT_PREFIX = "featureToggle.";
 export type ToggleType = string | boolean | number;
 export declare const cleanupOldToggles: (oldToggles: string[], prefix: string) => void;

package/utils/urlFeatureToggles.js

@@ -13,10 +13,9 @@ export const cleanupOldToggles = (oldToggles, prefix) => {
     }
 };
 const detectToggle = (param, prefix, transformFn) => {
-    var _a;
     const [_, searchParams = ''] = window.location.hash.split('?');
     const urlSearchParams = qs.parse(searchParams);
-    const urlValue = ((_a = get(param, urlSearchParams)) === null || _a === void 0 ? void 0 : _a.toString()) || '';
+    const urlValue = get(param, urlSearchParams)?.toString() || '';
     const storageValue = urlValue ? storage.save(param, urlValue, prefix) : storage.load(param, prefix);
     return storageValue && transformFn(storageValue);
 };

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.6.0"
+    "version": "1.7.0"
 }

package/lib/es/Onboarding.d.ts

@@ -1,2 +0,0 @@
-export { default } from './components/onboarding/Onboarding';
-export * from './components/onboarding/Onboarding';