@elementor/editor-responsive 0.1.0

package/src/components/__tests__/breakpoints-switcher.test.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { Breakpoint } from '../../types';
+import { render } from '@testing-library/react';
+import useBreakpoints from '../../hooks/use-breakpoints';
+import BreakpointsSwitcher from '../breakpoints-switcher';
+import useBreakpointsActions from '../../hooks/use-breakpoints-actions';
+
+jest.mock( '../../hooks/use-breakpoints', () => jest.fn() );
+jest.mock( '../../hooks/use-breakpoints-actions', () => jest.fn().mockReturnValue( {
+	activate: jest.fn(),
+} ) );
+
+describe( '@elementor/editor-responsive - Breakpoints Switcher', () => {
+	it( 'should not render when there are no breakpoints', () => {
+		// Arrange.
+		jest.mocked( useBreakpoints ).mockReturnValue( {
+			all: [],
+			active: {
+				id: 'desktop',
+				label: 'Desktop',
+			},
+		} );
+
+		// Act.
+		const { container } = render( <BreakpointsSwitcher /> );
+
+		// Assert.
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should not render when there is no active breakpoint', () => {
+		// Arrange.
+		jest.mocked( useBreakpoints ).mockReturnValue( {
+			active: null,
+			all: [ {
+				id: 'desktop',
+				label: 'Desktop',
+			} ],
+		} );
+
+		// Act.
+		const { container } = render( <BreakpointsSwitcher /> );
+
+		// Assert.
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should render all of the breakpoints', () => {
+		// Arrange.
+		const sortedBreakpoints: Breakpoint[] = [
+			{ id: 'widescreen', label: 'Widescreen', width: 2400, type: 'min-width' },
+			{ id: 'desktop', label: 'Desktop' },
+			{ id: 'laptop', label: 'Laptop', width: 1366, type: 'max-width' },
+			{ id: 'tablet_extra', label: 'Tablet Landscape', width: 1200, type: 'max-width' },
+			{ id: 'tablet', label: 'Tablet Portrait', width: 1024, type: 'max-width' },
+			{ id: 'mobile_extra', label: 'Mobile Landscape', width: 880, type: 'max-width' },
+			{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
+		];
+
+		jest.mocked( useBreakpoints ).mockReturnValue( {
+			all: sortedBreakpoints,
+			active: { id: 'desktop', label: 'Desktop' },
+		} );
+
+		// Act.
+		const { getAllByRole } = render( <BreakpointsSwitcher /> );
+
+		// Assert.
+		const tabs = getAllByRole( 'tab' );
+		const expectedLabels = [
+			'Widescreen (2400px and up)',
+			'Desktop',
+			'Laptop (up to 1366px)',
+			'Tablet Landscape (up to 1200px)',
+			'Tablet Portrait (up to 1024px)',
+			'Mobile Landscape (up to 880px)',
+			'Mobile Portrait (up to 767px)',
+		];
+
+		expect( tabs ).toHaveLength( 7 );
+
+		tabs.forEach( ( tab, index ) => {
+			expect( tab ).toHaveAttribute( 'aria-label', expectedLabels[ index ] );
+		} );
+
+		// Desktop should be active.
+		expect( tabs[ 1 ] ).toHaveAttribute( 'aria-selected', 'true' );
+	} );
+
+	it( 'should activate a breakpoint on click', () => {
+		// Arrange.
+		const activate = jest.fn();
+
+		jest.mocked( useBreakpointsActions ).mockReturnValue( {
+			activate,
+		} );
+
+		jest.mocked( useBreakpoints ).mockReturnValue( {
+			active: {
+				id: 'desktop',
+				label: 'Desktop',
+			},
+			all: [
+				{ id: 'mobile', label: 'Mobile Portrait' },
+				{ id: 'desktop', label: 'Desktop' },
+			],
+		} );
+
+		// Act.
+		const { getByLabelText } = render( <BreakpointsSwitcher /> );
+		const mobileTab = getByLabelText( 'Mobile Portrait', {
+			selector: 'button',
+		} );
+
+		mobileTab.click();
+
+		// Assert.
+		expect( activate ).toHaveBeenCalledWith( 'mobile' );
+	} );
+} );

package/src/components/breakpoints-switcher.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { BreakpointId } from '../types';
+import useBreakpoints from '../hooks/use-breakpoints';
+import { Tab, Tabs, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';
+import {
+	DesktopIcon,
+	TabletPortraitIcon,
+	MobilePortraitIcon,
+	WidescreenIcon,
+	LaptopIcon,
+	TabletLandscapeIcon,
+	MobileLandscapeIcon,
+} from '@elementor/icons';
+import useBreakpointsActions from '../hooks/use-breakpoints-actions';
+
+export default function BreakpointsSwitcher() {
+	const { all, active } = useBreakpoints();
+	const { activate } = useBreakpointsActions();
+
+	if ( ! all.length || ! active ) {
+		return null;
+	}
+
+	const onChange = ( _: unknown, value: BreakpointId ) => activate( value );
+
+	return (
+		<Tabs value={ active.id } onChange={ onChange } aria-label={ __( 'Switch Device', 'elementor' ) }>
+			{
+				all.map( ( { id, label, type, width } ) => {
+					const Icon = iconsMap[ id ];
+
+					const title = labelsMap[ type || 'default' ]
+						.replace( '%s', label )
+						.replace( '%d', width?.toString() || '' );
+
+					return (
+						<Tab value={ id }
+							key={ id }
+							aria-label={ title }
+							icon={ <Tooltip title={ title }><Icon /></Tooltip> }
+						/>
+					);
+				} )
+			}
+		</Tabs>
+
+	);
+}
+
+function Tooltip( props: TooltipProps ) {
+	return <BaseTooltip
+		PopperProps={ {
+			sx: {
+				'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
+					mt: 7,
+				},
+			},
+		} }
+		{ ...props }
+	/>;
+}
+
+const iconsMap = {
+	widescreen: WidescreenIcon,
+	desktop: DesktopIcon,
+	laptop: LaptopIcon,
+	tablet_extra: TabletLandscapeIcon,
+	tablet: TabletPortraitIcon,
+	mobile_extra: MobileLandscapeIcon,
+	mobile: MobilePortraitIcon,
+};
+
+const labelsMap = {
+	default: '%s',
+	// translators: %s: Breakpoint label, %d: Breakpoint size.
+	'min-width': __( '%s (%dpx and up)', 'elementor' ),
+
+	// translators: %s: Breakpoint label, %d: Breakpoint size.
+	'max-width': __( '%s (up to %dpx)', 'elementor' ),
+} as const;

package/src/hooks/__tests__/use-breakpoints-actions.test.tsx

@@ -0,0 +1,23 @@
+import { runCommand } from '@elementor/editor-v1-adapters';
+import { renderHook } from '@testing-library/react-hooks';
+import useBreakpointsActions from '../use-breakpoints-actions';
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	runCommand: jest.fn(),
+} ) );
+
+describe( '@elementor/editor-responsive - useBreakpointsActions', () => {
+	it( 'should activate a breakpoint', () => {
+		// Act.
+		const { result } = renderHook( () => useBreakpointsActions() );
+
+		result.current.activate( 'tablet' );
+
+		// Assert.
+		expect( jest.mocked( runCommand ) ).toHaveBeenCalledTimes( 1 );
+		expect( jest.mocked( runCommand ) ).toHaveBeenCalledWith(
+			'panel/change-device-mode',
+			{ device: 'tablet' }
+		);
+	} );
+} );

package/src/hooks/__tests__/use-breakpoints.test.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { Slice } from '../../types';
+import { PropsWithChildren } from 'react';
+import { createSlice } from '../../store';
+import useBreakpoints from '../use-breakpoints';
+import { renderHook } from '@testing-library/react-hooks';
+import { createStore, dispatch, SliceState, Store, StoreProvider } from '@elementor/store';
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	runCommand: jest.fn(),
+} ) );
+
+describe( '@elementor/editor-responsive - useBreakpoints', () => {
+	let store: Store<SliceState<Slice>>;
+	let slice: Slice;
+
+	beforeEach( () => {
+		slice = createSlice();
+		store = createStore();
+	} );
+
+	it( 'should return all breakpoints sorted by size', () => {
+		// Arrange.
+		dispatch( slice.actions.init( {
+			activeId: null,
+			entities: [
+				{ id: 'tablet', label: 'Tablet Portrait', width: 1024, type: 'max-width' },
+				{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
+				{ id: 'widescreen', label: 'Widescreen', width: 2400, type: 'min-width' },
+				{ id: 'desktop', label: 'Desktop' },
+			],
+		} ) );
+
+		// Act.
+		const { result } = renderHookWithStore( () => useBreakpoints(), store );
+
+		// Assert.
+		expect( result.current.all ).toEqual( [
+			{ id: 'widescreen', label: 'Widescreen', width: 2400, type: 'min-width' },
+			{ id: 'desktop', label: 'Desktop' },
+			{ id: 'tablet', label: 'Tablet Portrait', width: 1024, type: 'max-width' },
+			{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
+		] );
+	} );
+
+	it( 'should return the active breakpoint', () => {
+		// Arrange.
+		dispatch( slice.actions.init( {
+			activeId: 'tablet',
+			entities: [
+				{ id: 'desktop', label: 'Desktop' },
+				{ id: 'tablet', label: 'Tablet Portrait', type: 'max-width', width: 1024 },
+			],
+		} ) );
+
+		// Act.
+		const { result } = renderHookWithStore( () => useBreakpoints(), store );
+
+		// Assert.
+		expect( result.current.active ).toEqual( {
+			id: 'tablet',
+			label: 'Tablet Portrait',
+			type: 'max-width',
+			width: 1024,
+		} );
+	} );
+} );
+
+function renderHookWithStore<T>( hook: () => T, store: Store ) {
+	const wrapper = ( { children }: PropsWithChildren<unknown> ) => (
+		<StoreProvider store={ store }>
+			{ children }
+		</StoreProvider>
+	);
+
+	return renderHook( hook, { wrapper } );
+}

package/src/hooks/use-breakpoints-actions.ts

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+import { BreakpointId } from '../types';
+import { runCommand } from '@elementor/editor-v1-adapters';
+
+export default function useBreakpointsActions() {
+	const activate = useCallback( ( device: BreakpointId ) => {
+		return runCommand( 'panel/change-device-mode', { device } );
+	}, [] );
+
+	return {
+		activate,
+	};
+}

package/src/hooks/use-breakpoints.ts

@@ -0,0 +1,12 @@
+import { useSelector } from '@elementor/store';
+import { selectActiveBreakpoint, selectSortedBreakpoints } from '../store/selectors';
+
+export default function useBreakpoints() {
+	const all = useSelector( selectSortedBreakpoints );
+	const active = useSelector( selectActiveBreakpoint );
+
+	return {
+		all,
+		active,
+	};
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+import init from './init';
+
+init();

package/src/init.ts

@@ -0,0 +1,26 @@
+import { createSlice } from './store';
+import syncStore from './sync/sync-store';
+import { injectIntoResponsive } from '@elementor/editor-app-bar';
+import BreakpointsSwitcher from './components/breakpoints-switcher';
+
+export default function init() {
+	initStore();
+
+	registerAppBarUI();
+}
+
+function initStore() {
+	const slice = createSlice();
+
+	syncStore( slice );
+}
+
+function registerAppBarUI() {
+	injectIntoResponsive( {
+		name: 'responsive-breakpoints-switcher',
+		filler: BreakpointsSwitcher,
+		options: {
+			priority: 20, // After document indication.
+		},
+	} );
+}

package/src/store/index.ts

@@ -0,0 +1,42 @@
+import { addSlice, PayloadAction } from '@elementor/store';
+import { Breakpoint, BreakpointId } from '../types';
+
+export type State = {
+	entities: Record<BreakpointId, Breakpoint>,
+	activeId: BreakpointId | null,
+}
+const initialState: State = {
+	entities: {} as State['entities'],
+	activeId: null,
+};
+
+export function createSlice() {
+	return addSlice( {
+		name: 'breakpoints',
+		initialState,
+		reducers: {
+			init( state, action: PayloadAction<{
+				entities: Breakpoint[],
+				activeId: State['activeId'],
+			}> ) {
+				state.activeId = action.payload.activeId;
+				state.entities = normalizeEntities( action.payload.entities );
+			},
+
+			activateBreakpoint( state, action: PayloadAction<BreakpointId> ) {
+				if ( state.entities[ action.payload ] ) {
+					state.activeId = action.payload;
+				}
+			},
+		},
+	} );
+}
+
+function normalizeEntities( entities: Breakpoint[] ) {
+	return entities.reduce( ( acc, breakpoint ) => {
+		return {
+			...acc,
+			[ breakpoint.id ]: breakpoint,
+		};
+	}, {} as State['entities'] );
+}

package/src/store/selectors.ts

@@ -0,0 +1,37 @@
+import { Breakpoint, Slice } from '../types';
+import { createSelector, SliceState } from '@elementor/store';
+
+type State = SliceState<Slice>;
+
+export const selectEntities = ( state: State ) => state.breakpoints.entities;
+export const selectActiveId = ( state: State ) => state.breakpoints.activeId;
+
+export const selectActiveBreakpoint = createSelector(
+	selectEntities,
+	selectActiveId,
+	( entities, activeId ) => activeId && entities[ activeId ]
+		? entities[ activeId ]
+		: null,
+);
+
+export const selectSortedBreakpoints = createSelector(
+	selectEntities,
+	( entities ) => {
+		const byWidth = ( a: Breakpoint, b: Breakpoint ) => {
+			return ( a.width && b.width ) ? b.width - a.width : 0;
+		};
+
+		const all = Object.values( entities );
+
+		const defaults = all.filter( ( breakpoint ) => ! breakpoint.width ); // AKA Desktop.
+		const minWidth = all.filter( ( breakpoint ) => breakpoint.type === 'min-width' );
+		const maxWidth = all.filter( ( breakpoint ) => breakpoint.type === 'max-width' );
+
+		// Sort by size, big to small.
+		return [
+			...minWidth.sort( byWidth ),
+			...defaults,
+			...maxWidth.sort( byWidth ),
+		];
+	},
+);

package/src/sync/__tests__/sync-store.test.ts

@@ -0,0 +1,147 @@
+import syncStore from '../sync-store';
+import { createSlice } from '../../store';
+import { BreakpointId, ExtendedWindow, Slice } from '../../types';
+import { createStore, dispatch, SliceState, Store } from '@elementor/store';
+import { selectActiveBreakpoint, selectEntities } from '../../store/selectors';
+
+describe( '@elementor/editor-responsive - Sync Store', () => {
+	let store: Store<SliceState<Slice>>;
+	let slice: Slice;
+	let extendedWindow: ExtendedWindow;
+
+	beforeEach( () => {
+		slice = createSlice();
+		store = createStore();
+
+		syncStore( slice );
+
+		extendedWindow = ( window as unknown as ExtendedWindow );
+	} );
+
+	it( 'should initialize the store when V1 is ready', () => {
+		// Arrange.
+		mockV1BreakpointsConfig();
+
+		// Act.
+		dispatchEvent( new CustomEvent( 'elementor/initialized' ) );
+
+		// Assert.
+		expect( selectEntities( store.getState() ) ).toEqual( {
+			desktop: { id: 'desktop', label: 'Desktop' },
+			mobile: { id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
+			tablet: { id: 'tablet', label: 'Tablet Portrait', width: 1024, type: 'max-width' },
+			laptop: { id: 'laptop', label: 'Laptop', width: 1366, type: 'max-width' },
+			widescreen: { id: 'widescreen', label: 'Widescreen', width: 2400, type: 'min-width' },
+			mobile_extra: { id: 'mobile_extra', label: 'Mobile Landscape', width: 880, type: 'max-width' },
+			tablet_extra: { id: 'tablet_extra', label: 'Tablet Landscape', width: 1200, type: 'max-width' },
+		} );
+
+		expect( extendedWindow.elementor.channels.deviceMode.request ).toHaveBeenCalledTimes( 1 );
+		expect( extendedWindow.elementor.channels.deviceMode.request ).toHaveBeenCalledWith( 'currentMode' );
+
+		expect( selectActiveBreakpoint( store.getState() ) ).toEqual( {
+			id: 'mobile',
+			label: 'Mobile Portrait',
+			width: 767,
+			type: 'max-width',
+		} );
+	} );
+
+	it( 'should initialize an empty store when V1 breakpoints config is not available', () => {
+		// Act.
+		dispatchEvent( new CustomEvent( 'elementor/initialized' ) );
+
+		// Assert.
+		expect( selectEntities( store.getState() ) ).toEqual( {} );
+	} );
+
+	it( 'should sync the active breakpoint on change', () => {
+		// Arrange.
+		mockV1BreakpointsConfig();
+
+		dispatch( slice.actions.init( {
+			entities: [
+				{ id: 'desktop', label: 'Desktop' },
+				{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
+			],
+			activeId: 'mobile',
+		} ) );
+
+		// Act - Mock a change.
+		jest.mocked( extendedWindow.elementor.channels.deviceMode.request ).mockReturnValue( 'desktop' );
+		dispatchEvent( new CustomEvent( 'elementor/device-mode/change' ) );
+
+		// Assert.
+		expect( selectActiveBreakpoint( store.getState() ) ).toEqual( { id: 'desktop', label: 'Desktop' } );
+	} );
+
+	it( "should not change the active breakpoint when it's empty", () => {
+		// Arrange.
+		mockV1BreakpointsConfig();
+
+		dispatch( slice.actions.init( {
+			entities: [
+				{ id: 'desktop', label: 'Desktop' },
+				{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
+			],
+			activeId: 'desktop',
+		} ) );
+
+		// Act - Mock a change.
+		jest.mocked( extendedWindow.elementor.channels.deviceMode.request ).mockReturnValue( '' as BreakpointId );
+		dispatchEvent( new CustomEvent( 'elementor/device-mode/change' ) );
+
+		// Assert.
+		expect( selectActiveBreakpoint( store.getState() ) ).toEqual( { id: 'desktop', label: 'Desktop' } );
+	} );
+} );
+
+function mockV1BreakpointsConfig() {
+	( window as unknown as ExtendedWindow ).elementor = {
+		channels: {
+			deviceMode: { request: jest.fn( () => 'mobile' ) },
+		},
+		config: {
+			responsive: {
+				breakpoints: {
+					mobile: {
+						label: 'Mobile Portrait',
+						value: 767,
+						direction: 'max',
+						is_enabled: true,
+					},
+					mobile_extra: {
+						label: 'Mobile Landscape',
+						value: 880,
+						direction: 'max',
+						is_enabled: true,
+					},
+					tablet: {
+						label: 'Tablet Portrait',
+						value: 1024,
+						direction: 'max',
+						is_enabled: true,
+					},
+					tablet_extra: {
+						label: 'Tablet Landscape',
+						value: 1200,
+						direction: 'max',
+						is_enabled: true,
+					},
+					laptop: {
+						label: 'Laptop',
+						value: 1366,
+						direction: 'max',
+						is_enabled: true,
+					},
+					widescreen: {
+						label: 'Widescreen',
+						value: 2400,
+						direction: 'min',
+						is_enabled: true,
+					},
+				} as const,
+			},
+		},
+	};
+}

package/src/sync/sync-store.ts

@@ -0,0 +1,74 @@
+import { dispatch } from '@elementor/store';
+import { Breakpoint, ExtendedWindow, Slice } from '../types';
+import { listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
+
+export default function syncStore( slice: Slice ) {
+	syncInitialization( slice );
+	syncOnChange( slice );
+}
+
+function syncInitialization( slice: Slice ) {
+	const { init } = slice.actions;
+
+	listenTo(
+		v1ReadyEvent(),
+		() => {
+			dispatch( init( {
+				entities: getBreakpoints(),
+				activeId: getActiveBreakpoint(),
+			} ) );
+		}
+	);
+}
+
+function syncOnChange( slice: Slice ) {
+	const { activateBreakpoint } = slice.actions;
+
+	listenTo(
+		deviceModeChangeEvent(),
+		() => {
+			const activeBreakpoint = getActiveBreakpoint();
+
+			dispatch( activateBreakpoint( activeBreakpoint ) );
+		},
+	);
+}
+
+function getBreakpoints() {
+	const { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};
+
+	if ( ! breakpoints ) {
+		return [];
+	}
+
+	const entities = Object
+		.entries( breakpoints )
+		.filter( ( [ , breakpoint ] ) => breakpoint.is_enabled )
+		.map( ( [ id, { value, direction, label } ] ) => {
+			return {
+				id,
+				label,
+				width: value,
+				type: direction === 'min' ? 'min-width' : 'max-width',
+			} as Breakpoint;
+		} );
+
+	// Desktop breakpoint is not included in V1 config.
+	entities.push( {
+		id: 'desktop',
+		label: __( 'Desktop', 'elementor' ),
+	} );
+
+	return entities;
+}
+
+function getActiveBreakpoint() {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.channels?.deviceMode?.request?.( 'currentMode' ) || null;
+}
+
+function deviceModeChangeEvent() {
+	return windowEvent( 'elementor/device-mode/change' );
+}