More classes refactor.

packages/editor/src/components/app-bar/index.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import ActionConfig from '../../classes/action-config';
 import MaterialToolbar from '@mui/material/Toolbar';
-import AppBar from '@mui/material/AppBar';
-import { ToolbarMenuItem } from './Toolbar';
+import MaterialAppBar from '@mui/material/AppBar';
+import { ToolbarMenuItem } from '../toolbar/Toolbar';
 
 /**
  * App bar
  * @param props.configurations the configurations array
  * @returns toolbar wich contains an entry for each configuration in the array
  */
-const Menubar = (props: { configurations: ActionConfig[] }) => {
+const AppBar = (props: { configurations: ActionConfig[] }) => {
   return (
-    <AppBar
+    <MaterialAppBar
       role="menubar"
       position="absolute"
       color="default"
@@ -27,8 +27,8 @@ const Menubar = (props: { configurations: ActionConfig[] }) => {
           return <ToolbarMenuItem key={i} configuration={c} />;
         })}
       </MaterialToolbar>
-    </AppBar>
+    </MaterialAppBar>
   );
 };
 
-export default Menubar;
+export default AppBar;

packages/editor/src/components/toolbar/Toolbar.tsx

@@ -4,7 +4,7 @@ import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
 import Popover, { PopoverOrigin } from '@mui/material/Popover';
 import Tooltip from '@mui/material/Tooltip';
-import './appbar-buttons.css';
+import '../app-bar/styles.css';
 import Box from '@mui/material/Box';
 import ActionConfig from '../../classes/action-config';
 import ToolbarPosition, { defaultPosition } from './ToolbarPositionInterface';

packages/editor/src/components/toolbar/color-picker/index.tsx

@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 import React from 'react';
-import { NodePropertyValueModel } from '../../ToolbarValueModelBuilder';
+import { NodePropertyValueModel } from '../ToolbarValueModelBuilder';
 import { CirclePicker as ReactColorPicker } from 'react-color';
 import colors from './colors.json';
 

packages/editor/src/components/toolbar/index.ts

@@ -1,6 +1,6 @@
 import Toolbar from './Toolbar';
 import { horizontalPosition } from './ToolbarPositionInterface';
-import Appbar from './AppBar';
+import Header from '../app-bar';
 import {
   buildEditorAppBarConfiguration,
   buildToolbarCongiruation,
@@ -8,11 +8,12 @@ import {
 } from './toolbarConfigurationBuilder';
 
 export default Toolbar;
+
 export const configurationBuilder = {
   buildEditorAppBarConfiguration,
   buildToolbarCongiruation,
   buildZoomToolbarConfiguration,
 };
-export { horizontalPosition, Appbar };
+export { horizontalPosition, Header };
 
 export type ToolbarActionType = 'export' | 'publish' | 'history' | 'print' | 'share' | 'info';

packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx

@@ -43,13 +43,13 @@ import KeyboardOutlined from '@mui/icons-material/KeyboardOutlined';
 import Tooltip from '@mui/material/Tooltip';
 import UrlForm from './component/link-form';
 import NoteForm from './component/note-form';
-import ColorPicker from './component/color-picker';
-import { KeyboardShorcutsHelp } from './component/keyboard-shortcut-help';
+import ColorPicker from './color-picker';
+import { KeyboardShorcutsHelp } from '../footer/keyboard-shortcut-help';
 
 /**
  *
  * @param designer designer to aply changes
- * @returns configuration for @wisemapping/editor primary toolbar
+ * @returns configuration for @wisemapping/editor priAppbarmary toolbar
  */
 export function buildToolbarCongiruation(designer: Designer): ActionConfig[] {
   if (!designer) return [];

packages/editor/src/index.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { ToolbarActionType } from './components/toolbar';
 import Popover from '@mui/material/Popover';
 
 import { IntlProvider } from 'react-intl';
@@ -24,13 +23,18 @@ import {
 } from '@wisemapping/mindplot';
 import './global-styled.css';
 import I18nMsg from './classes/i18n-msg';
-import Toolbar, { horizontalPosition, Appbar, configurationBuilder } from './components/toolbar';
+import Toolbar, {
+  horizontalPosition,
+  configurationBuilder,
+  ToolbarActionType,
+} from './components/toolbar';
 import { theme as defaultEditorTheme } from './theme';
 import ThemeProvider from '@mui/material/styles/ThemeProvider';
 import { Theme } from '@mui/material/styles';
 import { Notifier } from './components/footer/styled';
 import Footer from './components/footer';
 import DefaultWidgetManager from './classes/default-widget-manager';
+import AppBar from './components/app-bar';
 
 declare global {
   // used in mindplot
@@ -230,7 +234,7 @@ const Editor = ({
   return (
     <ThemeProvider theme={editorTheme}>
       <IntlProvider locale={locale} messages={msg}>
-        <Appbar configurations={menubarConfiguration} />
+        <AppBar configurations={menubarConfiguration} />
         <Popover
           id="popover"
           open={popoverOpen}

packages/editor/test/unit/toolbar/toolbar.test.tsx

@@ -10,9 +10,9 @@ import Toolbar, {
   ToolbarSubmenu,
 } from '../../../src/components/toolbar/Toolbar';
 import ActionConfig from '../../../src/classes/action-config';
-import Menubar from '../../../src/components/toolbar/AppBar';
+import AppBar from '../../../src/components/app-bar';
 require('babel-polyfill');
-jest.mock('../../../src/components/toolbar/appbar-buttons.css', () => '');
+jest.mock('../../../src/components/app-bar/styles.css', () => '');
 
 const config: ActionConfig = {
   icon: <ThreeDRotation></ThreeDRotation>,
@@ -270,20 +270,20 @@ describe('Toolbar', () => {
 
 describe('Menubar', () => {
   it('When render it displays a menu', () => {
-    render(<Menubar configurations={[config, config]}></Menubar>);
+    render(<AppBar configurations={[config, config]}></AppBar>);
 
     screen.getByRole('menubar');
   });
 
   it('Given an options array for configurations with 2 options when render it displays a menu with 2 menuitems', () => {
-    render(<Menubar configurations={[config, config]}></Menubar>);
+    render(<AppBar configurations={[config, config]}></AppBar>);
     const items = screen.getAllByRole('button');
 
     expect(items).toHaveLength(2);
   });
 
   it('Execute render if set', () => {
-    render(<Menubar configurations={[withRenderConfig]} />);
+    render(<AppBar configurations={[withRenderConfig]} />);
 
     screen.getByTestId('custom-render-div');
   });