TASK: Extract logger and clamp helper

packages/commandbar/src/CommandBar.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useReducer, useRef } from 'react';
 import * as styles from './CommandBar.module.css';
 import { ACTIONS, commandBarReducer } from './state/commandBarReducer';
 import { CommandBarFooter, CommandBarHeader, CommandList, CommandResultsView } from './components';
-import { flattenCommands } from './helpers/flattenCommands';
+import { clamp, flattenCommands, logger } from './helpers';
 import useFunctionRef from './hooks/useFunctionRef';
 
 type CommandBarProps = {
@@ -101,11 +101,11 @@ const CommandBar: React.FC<CommandBarProps> = ({ commands, open, toggleOpen }) =
                 (actionResult as AsyncCommandResult)
                     .then((result) => {
                         // TODO: Handle success === false
-                        console.debug('Command result', result);
+                        logger.debug('Command result', result);
                     })
                     .catch((error) => {
                         // TODO: Show error message
-                        console.error('Command error', error);
+                        logger.error('Command error', error);
                     })
                     .finally(() => {
                         dispatch({ type: ACTIONS.FINISHED_COMMAND });
@@ -122,7 +122,7 @@ const CommandBar: React.FC<CommandBarProps> = ({ commands, open, toggleOpen }) =
                 }
                 dispatch({ type: ACTIONS.FINISHED_COMMAND });
             } else {
-                console.warn('Command result is not a promise or generator', actionResult);
+                logger.error('Command result is not a promise or generator', actionResult);
             }
         },
         [state.searchWord, state.commands]
@@ -140,9 +140,9 @@ const CommandBar: React.FC<CommandBarProps> = ({ commands, open, toggleOpen }) =
 
         // const guestFrame = document.getElementsByName('neos-content-main')[0] as HTMLIFrameElement;
         // guestFrame.contentWindow?.addEventListener('keyup', (e) => {
-        //     console.debug('keypress in guestframe', e);
+        //     log.debug('keypress in guestframe', e);
         // });
-        // console.debug('guestFrame', guestFrame.contentWindow);
+        // log.debug('guestFrame', guestFrame.contentWindow);
 
         const windowKeyEventHandler = (e) => handleKeyEnteredRef.current(e);
 

packages/commandbar/src/components/CommandResultsView/CommandResultsView.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 
 import * as styles from './CommandResultsView.module.css';
 import CommandListing from '../CommandList/CommandList';
+import { logger } from '../../helpers';
 
 type CommandResultsViewProps = {
     result: CommandResult;
@@ -19,7 +20,7 @@ const CommandResultsView: React.FC<CommandResultsViewProps> = ({ result, highlig
                 window.location.href = action;
                 return;
             }
-            console.debug('Running action result command', commandId);
+            logger.debug('Running action result command', commandId);
             action();
         },
         [options]

packages/commandbar/src/helpers/clamp.ts

@@ -0,0 +1,3 @@
+export default function clamp(value: number, min: number, max: number): number {
+    return Math.max(min, Math.min(max, value));
+}

packages/commandbar/src/helpers/flattenCommands.ts

@@ -2,7 +2,10 @@
  * This method converts the hierarchical command list into a flat list of commands which is more convenient
  * for internal processing, whereas the hierarchical command list is more convenient for the user.
  */
-export function flattenCommands(commands: HierarchicalCommandList, parentId: CommandId = null): FlatCommandList {
+export default function flattenCommands(
+    commands: HierarchicalCommandList,
+    parentId: CommandId = null
+): FlatCommandList {
     return Object.keys(commands).reduce((commandList, commandId) => {
         const { icon, description, name, subCommands, action, canHandleQueries } = commands[commandId] as Command &
             CommandGroup;

packages/commandbar/src/helpers/index.ts

@@ -0,0 +1,5 @@
+import flattenCommands from './flattenCommands';
+import logger from './logger';
+import clamp from './clamp';
+
+export { flattenCommands, logger, clamp };

packages/commandbar/src/helpers/logger.ts

@@ -0,0 +1,12 @@
+const logger = {
+    ok: (message: string, ...args: any[]) => console.log(`%c${message}`, 'color: green', ...args),
+    error: (message: string, ...args: any[]) => console.log(`%c${message}`, 'color: red', ...args),
+    warn: (message: string, ...args: any[]) => console.warn(`%c${message}`, 'color: orange', ...args),
+    debug:
+        // @ts-ignore
+        process.env.NODE_ENV === 'production'
+            ? () => null
+            : (message: string, ...args: any[]) => console.debug(`%c${message}`, 'color: blue', ...args),
+};
+
+export default logger;

packages/commandbar/src/index.ts

@@ -1,4 +1,5 @@
 import CommandBar from './CommandBar';
 import { ToggleButton } from './components';
+import { logger } from './helpers';
 
-export { CommandBar, ToggleButton };
+export { CommandBar, ToggleButton, logger };

packages/commandbar/src/state/commandBarReducer.ts

@@ -1,4 +1,5 @@
 import FuzzySearch from 'fuzzy-search';
+import { clamp } from '../helpers';
 
 enum ACTIONS {
     RESET_SEARCH,
@@ -27,10 +28,6 @@ type CommandBarAction =
     | { type: ACTIONS.FINISHED_COMMAND }
     | { type: ACTIONS.SET_RESULT; result: CommandResult };
 
-function clamp(value, min, max) {
-    return Math.max(min, Math.min(max, value));
-}
-
 function filterAvailableCommands(
     selectedCommandGroup: CommandId,
     searchWord: string,

packages/dev-server/src/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { CommandBar } from '@neos-commandbar/commandbar';
+import { CommandBar, logger } from '@neos-commandbar/commandbar';
 
 (() => {
     const initialContent = {
@@ -35,12 +35,12 @@ import { CommandBar } from '@neos-commandbar/commandbar';
         const [currentWebsite, setCurrentWebsite] = useState('pageA');
 
         const publishAll: CommandAction = useCallback(async () => {
-            console.debug('Publishing all');
+            logger.debug('Publishing all');
             setPublished(true);
         }, []);
 
         const addContentElement = useCallback(async (page: string, nodeType: string, text: string) => {
-            console.debug('Adding more content to page ' + page);
+            logger.debug('Adding more content to page ' + page);
             setContent((prev) => {
                 return {
                     ...prev,
@@ -56,7 +56,7 @@ import { CommandBar } from '@neos-commandbar/commandbar';
         }, []);
 
         const findDocument: CommandAction = useCallback(async () => {
-            console.debug('Find document ist not implemented yet');
+            logger.debug('Find document ist not implemented yet');
             return {
                 success: false,
             };
@@ -69,7 +69,7 @@ import { CommandBar } from '@neos-commandbar/commandbar';
                     icon: 'home',
                     name: 'Home',
                     description: 'Sends you home',
-                    action: async () => console.debug('Go home'),
+                    action: async () => logger.debug('Go home'),
                 },
                 toggleLeftSidebar: {
                     icon: 'toggle-on',
@@ -125,25 +125,25 @@ import { CommandBar } from '@neos-commandbar/commandbar';
                             name: 'Media',
                             icon: 'camera',
                             description: 'Manage images and other assets',
-                            action: async () => console.debug('Opened the media module'),
+                            action: async () => logger.debug('Opened the media module'),
                         },
                         workspaces: {
                             name: 'Workspaces',
                             icon: 'th-large',
                             description: 'Publish or discard changes in workspaces',
-                            action: async () => console.debug('Opened the workspaces module'),
+                            action: async () => logger.debug('Opened the workspaces module'),
                         },
                         history: {
                             name: 'History',
                             icon: 'calendar',
                             description: 'View historic changes to content',
-                            action: async () => console.debug('Opened the history module'),
+                            action: async () => logger.debug('Opened the history module'),
                         },
                         redirects: {
                             name: 'Redirects',
                             icon: 'share',
                             description: 'Manage redirects for documents and assets',
-                            action: async () => console.debug('Opened the redirects module'),
+                            action: async () => logger.debug('Opened the redirects module'),
                         },
                     },
                 },

packages/module-plugin/src/index.tsx

@@ -3,7 +3,9 @@ import ReactDOM from 'react-dom';
 
 import * as styles from './ModulePlugin.module.css';
 
-import { ToggleButton } from '@neos-commandbar/commandbar';
+// FIXME: Replace with import from main when esm build issue is fixed
+import { ToggleButton } from '@neos-commandbar/commandbar/src/components';
+import { logger } from '@neos-commandbar/commandbar/src/helpers';
 
 const ENDPOINT_COMMANDS = '/neos/service/data-source/shel-neos-commandbar-commands';
 
@@ -34,13 +36,13 @@ window.addEventListener('load', async (): Promise<void> => {
                 .then((commands: ModuleCommands) => {
                     setCommands({ ...commands });
                     setInitialized(true);
-                    console.debug(
+                    logger.debug(
                         '[CommandBar] Initialized command bar for backend modules with the following commands:',
                         Object.keys(commands)
                     );
                 })
                 .catch((e) => {
-                    console.error('[CommandBar]', e);
+                    logger.error('[CommandBar]', e);
                 });
         }, []);
 

packages/ui-plugin/src/CommandBarUiPlugin.tsx

@@ -9,7 +9,7 @@ import { neos } from '@neos-project/neos-ui-decorators';
 import { selectors, actions } from '@neos-project/neos-ui-redux-store';
 
 import * as styles from './CommandBarUiPlugin.module.css';
-import { CommandBar, ToggleButton } from '@neos-commandbar/commandbar';
+import { CommandBar, logger, ToggleButton } from '@neos-commandbar/commandbar';
 import { actions as commandBarActions, selectors as commandBarSelectors } from './actions';
 import fetchData from './helpers/fetchData';
 
@@ -193,7 +193,7 @@ class CommandBarUiPlugin extends React.PureComponent<CommandBarUiPluginProps, Co
                     const pluginCommands = plugins[pluginName]();
                     this.setState((prev) => ({ commands: { ...prev.commands, ...pluginCommands } }));
                 } catch (e) {
-                    console.error(`[CommandBar] Could not load commands from plugin ${pluginName}`, e);
+                    logger.error(`[CommandBar] Could not load commands from plugin ${pluginName}`, e);
                 }
             });
         }
@@ -204,7 +204,7 @@ class CommandBarUiPlugin extends React.PureComponent<CommandBarUiPluginProps, Co
                 this.setState((prev) => ({ loaded: true, commands: { ...prev.commands, ...commands } }));
             })
             .catch((error) => {
-                console.error('[CommandBar] Failed to load commands', error);
+                logger.error('[CommandBar] Failed to load commands', error);
             });
     }