@elementor/editor-site-navigation 0.6.2 → 0.8.0

package/src/components/panel/pages-list/__tests__/pages-collapsible-list.test.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Page } from '../../../../types';
+import PagesCollapsibleList from '../pages-collapsible-list';
+
+jest.mock( '@elementor/editor-documents' );
+
+describe( '@elementor/editor-site-navigation - PagesCollapsibleList', () => {
+	const mockPosts: Page[] = [
+		{ id: 1, type: 'page', title: 'Home', status: 'draft' },
+		{ id: 2, type: 'page', title: 'About', status: 'publish' },
+		{ id: 3, type: 'page', title: 'Services', status: 'publish', isHome: true },
+		{ id: 4, type: 'page', title: 'Contact', status: 'draft' },
+		{ id: 5, type: 'page', title: 'FAQ', status: 'publish' },
+	];
+
+	afterAll( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should render closed list', () => {
+		// Act.
+		const { getByText, queryByText } = render(
+			<PagesCollapsibleList pages={ mockPosts } isOpenByDefault={ false } />,
+		);
+
+		// Assert.
+		const label = getByText( `Pages (${ mockPosts.length })` );
+		expect( label ).toBeInTheDocument();
+
+		const postInList = queryByText( 'Services' );
+		expect( postInList ).toBeNull();
+	} );
+
+	it( 'should render open list', () => {
+		// Act.
+		const { getByText } = render(
+			<PagesCollapsibleList pages={ mockPosts } isOpenByDefault={ true } />,
+		);
+
+		// Assert.
+		const label = getByText( `Pages (${ mockPosts.length })` );
+		expect( label ).toBeInTheDocument();
+
+		const postInList = getByText( 'Services' );
+		expect( postInList ).toBeInTheDocument();
+	} );
+} );

package/src/components/panel/pages-list/collapsible-list.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { ComponentType, PropsWithChildren, useState } from 'react';
+import { Collapse, IconButton, List, ListItem, ListItemIcon, ListItemText, styled, SvgIconProps } from '@elementor/ui';
+import { ChevronDownIcon } from '@elementor/icons';
+
+type Props = {
+	label: string
+	Icon: ComponentType;
+	isOpenByDefault?: boolean;
+}
+
+interface RotateIconProps extends SvgIconProps {
+	isOpen: boolean;
+}
+
+// TODO 21/06/2023 : Should replace this with future Rotate component that will be implemented in elementor-ui
+const RotateIcon = styled( ChevronDownIcon, {
+	shouldForwardProp: ( prop ) => prop !== 'isOpen',
+} )<RotateIconProps>( ( { theme, isOpen } ) => ( {
+	transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)',
+	transition: theme.transitions.create( 'transform', {
+		duration: theme.transitions.duration.standard,
+	} ),
+} ) );
+
+export default function CollapsibleList(
+	{
+		label,
+		Icon,
+		isOpenByDefault = false,
+		children,
+	}: PropsWithChildren<Props>
+) {
+	const [ isOpen, setIsOpen ] = useState( isOpenByDefault );
+
+	return (
+		<>
+			<ListItem disableGutters>
+				<ListItemIcon>
+					<IconButton
+						onClick={ () => setIsOpen( ( prev ) => ! prev ) }
+						sx={ { color: 'inherit' } }
+						size="small"
+					>
+						<RotateIcon fontSize="small" isOpen={ isOpen } />
+					</IconButton>
+				</ListItemIcon>
+				<ListItemIcon>
+					<Icon />
+				</ListItemIcon>
+				<ListItemText>{ label }</ListItemText>
+			</ListItem>
+			<Collapse
+				in={ isOpen }
+				timeout="auto"
+				unmountOnExit>
+				<List dense>
+					{ children }
+				</List>
+			</Collapse>
+		</>
+	);
+}

package/src/components/panel/pages-list/page-list-item.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {
+	bindMenu,
+	bindTrigger,
+	ListItem,
+	ListItemButton,
+	ListItemIcon,
+	ListItemText,
+	ToggleButton,
+	usePopupState,
+} from '@elementor/ui';
+import { DotsVerticalIcon, HomeIcon } from '@elementor/icons';
+import { Page } from '../../../types';
+import { useActiveDocument, useNavigateToDocument } from '@elementor/editor-documents';
+import PageTitleAndStatus from '../../shared/page-title-and-status';
+import PageActionsMenu from '../actions-menu/page-actions-menu';
+
+export default function PageListItem( { page }: { page: Page } ) {
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: 'page-actions',
+	} );
+
+	const activeDocument = useActiveDocument();
+	const navigateToDocument = useNavigateToDocument();
+
+	const isActive = activeDocument?.id === page.id;
+
+	return (
+		<>
+			<ListItem
+				disablePadding
+				secondaryAction={
+					<ToggleButton
+						value
+						color="secondary"
+						size="small"
+						selected={ popupState.isOpen }
+						{ ...bindTrigger( popupState ) }
+					>
+						<DotsVerticalIcon fontSize="small" />
+					</ToggleButton>
+				}
+			>
+				<ListItemButton
+					selected={ isActive }
+					onClick={ () => navigateToDocument( page.id ) }
+					dense
+				>
+					<ListItemIcon />
+					<ListItemText
+						disableTypography={ true }
+					>
+						<PageTitleAndStatus page={ page } />
+					</ListItemText>
+					{ page.isHome &&
+						<ListItemIcon>
+							<HomeIcon color="disabled" />
+						</ListItemIcon>
+					}
+				</ListItemButton>
+			</ListItem>
+			<PageActionsMenu page={ page } { ...bindMenu( popupState ) } />
+		</>
+	);
+}

package/src/components/panel/pages-list/pages-collapsible-list.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import CollapsibleList from './collapsible-list';
+import { Page } from '../../../types';
+import { PageTypeIcon } from '@elementor/icons';
+import PageListItem from './page-list-item';
+
+type Props = {
+	pages: Page[];
+	isOpenByDefault?: boolean;
+}
+
+export default function PagesCollapsibleList( { pages, isOpenByDefault = false }: Props ) {
+	const label = `Pages (${ pages.length })`; // TODO 21/06/2023 : This label should come from the backend
+
+	return (
+		<CollapsibleList
+			label={ label }
+			Icon={ PageTypeIcon }
+			isOpenByDefault={ isOpenByDefault }
+		>
+			{ pages.map( ( page ) => <PageListItem key={ page.id } page={ page } /> ) }
+		</CollapsibleList>
+	);
+}

package/src/components/panel/shell.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Box, Button, Divider, Grid, List, Paper, ThemeProvider, Typography } from '@elementor/ui';
+import { PlusIcon } from '@elementor/icons';
+import { Page } from '../../types';
+import PagesCollapsibleList from './pages-list/pages-collapsible-list';
+
+// TODO: Remove once connected to real data fetching.
+const mockPages: Page[] = [
+	{
+		id: 1,
+		type: 'page',
+		title: 'This is a very long title that somebody wrote, a very very long line',
+		status: 'pending approval',
+	},
+	{ id: 2, type: 'page', title: 'About', status: 'publish' },
+	{ id: 3, type: 'page', title: 'Services', status: 'publish', isHome: true },
+	{ id: 4, type: 'page', title: 'Contact', status: 'draft' },
+	{ id: 5, type: 'page', title: 'FAQ', status: 'publish' },
+];
+
+const Shell = () => {
+	return (
+		<ThemeProvider colorScheme="light">
+			<Box sx={ { width: '100%', maxWidth: 360 } }>
+				<Paper>
+					<Grid
+						container
+						justifyContent="center"
+						alignItems="center"
+						sx={ { height: 51 } }>
+						<Typography variant="h6">Pages</Typography>
+					</Grid>
+					<Divider />
+					<Box
+						display="flex"
+						justifyContent="flex-end"
+						alignItems="center"
+					>
+						<Button
+							sx={ { mt: 4, mb: 4, mr: 5 } }
+							startIcon={ <PlusIcon /> }
+						>
+							Add New
+						</Button>
+					</Box>
+					<Box sx={ { width: '100%', maxWidth: 360 } }>
+						<List dense>
+							<PagesCollapsibleList pages={ mockPages } isOpenByDefault={ true } />
+						</List>
+					</Box>
+					<Divider />
+				</Paper>
+			</Box>
+		</ThemeProvider>
+	);
+};
+
+export default Shell;

package/src/components/shared/page-title-and-status.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Box, Typography } from '@elementor/ui';
+import { Page } from '../../types';
+import { useReverseHtmlEntities } from '../../hooks/use-reverse-html-entities';
+
+const PageStatus = ( { status }: { status: string } ) => {
+	if ( 'publish' === status ) {
+		return null;
+	}
+
+	return (
+		<Typography
+			component="span"
+			variant="body1"
+			sx={ {
+				textTransform: 'capitalize',
+				fontStyle: 'italic',
+				whiteSpace: 'nowrap',
+				flexBasis: 'content',
+			} }
+		>
+			({ status })
+		</Typography>
+	);
+};
+
+const PageTitle = ( { title }: { title: string } ) => {
+	const modifiedTitle = useReverseHtmlEntities( title );
+
+	return (
+		<Typography
+			component="span"
+			variant="body1"
+			noWrap
+			sx={ {
+				flexBasis: 'auto',
+			} }
+		>
+			{ modifiedTitle }
+		</Typography>
+	);
+};
+
+export default function PageTitleAndStatus( { page }: { page: Page } ) {
+	return (
+		<Box display="flex">
+			<PageTitle title={ page.title } />&nbsp;<PageStatus status={ page.status } />
+		</Box>
+	);
+}

package/src/hooks/types/interfaces.ts

@@ -0,0 +1,13 @@
+export interface Post {
+	id: number;
+	title: string;
+	content: string;
+}
+
+export interface PostType {
+	name: string;
+	slug: string;
+	labels: Record<string, string>;
+	rest_base: string;
+	rest_namespace: string;
+}

package/src/hooks/use-post-types.ts

@@ -0,0 +1,64 @@
+import { useState, useEffect, useMemo } from 'react';
+import { PostType } from './types/interfaces';
+import apiFetch from '@wordpress/api-fetch';
+
+type PostTypesResponse = Record<string, PostType>;
+
+// allowedPostTypes is only used to filter irrelevant types when fetching all post types.
+// You can still use a specific post type name to fetch a post type not present in allowedPostTypes.
+const allowedPostTypes = [ 'page' ];
+
+const useFetchPostTypes = (
+	postTypeName?: string
+): ( PostType | null )[] => {
+	const [ postTypes, setPostTypes ] = useState<( PostType | null )[]>( [] );
+
+	useEffect( () => {
+		const fetchPostTypes = async () => {
+			try {
+				const response: PostTypesResponse = await apiFetch( {
+					path: '/wp/v2/types',
+				} );
+
+				if ( postTypeName ) {
+					const specificPostType = response[ postTypeName ];
+
+					setPostTypes( [
+						specificPostType
+							? { ...specificPostType }
+							: null,
+					] );
+				} else {
+					const filteredResponse: PostTypesResponse = {};
+
+					allowedPostTypes.forEach( ( type ) => {
+						if ( response[ type ] ) {
+							filteredResponse[ type ] = response[ type ];
+						}
+					} );
+
+					const filteredPostTypes: ( PostType | null )[] = Object.keys( filteredResponse ).map(
+						( key ) => ( { ...filteredResponse[ key ] } )
+					);
+
+					setPostTypes( filteredPostTypes );
+				}
+			} catch ( error ) {
+				// eslint-disable-next-line no-console
+				console.error( 'Error fetching post types:', error );
+			}
+		};
+
+		fetchPostTypes();
+	}, [ postTypeName ] );
+
+	return postTypes;
+};
+
+export const usePostTypes = (
+	postTypeName?: string
+): ( PostType | null )[] => {
+	const postTypes = useFetchPostTypes( postTypeName );
+
+	return useMemo( () => postTypes, [ postTypes ] );
+};

package/src/hooks/use-posts.ts

@@ -0,0 +1,123 @@
+import { useEffect, useMemo, useState, useCallback } from 'react';
+import { usePostTypes } from './use-post-types';
+import { Post, PostType } from './types/interfaces';
+import apiFetch from '@wordpress/api-fetch';
+
+const defaultRestNamespace = 'wp/v2';
+
+const useFetchPosts = ( postType: PostType | null | undefined ): [ Post[], () => void, boolean ] => {
+	const [ posts, setPosts ] = useState<Post[]>( [] );
+	const [ isLoading, setIsLoading ] = useState( false );
+
+	const fetchPosts = useCallback( () => {
+		setIsLoading( true );
+
+		const path = postType
+			? `/${ postType.rest_namespace }/${ postType.rest_base }`
+			: `/${ defaultRestNamespace }/posts`;
+
+		apiFetch( { path } )
+			.then( ( response ) => {
+				if ( Array.isArray( response ) ) {
+					setPosts( response );
+				}
+			} )
+			.catch( ( error ) => {
+				// eslint-disable-next-line no-console
+				console.error( 'Error fetching posts:', error );
+			} )
+			.finally( () => {
+				setIsLoading( false );
+			} );
+	}, [ postType ] );
+
+	useEffect( () => {
+		fetchPosts();
+	}, [ fetchPosts ] );
+
+	return [ posts, fetchPosts, isLoading ];
+};
+
+const useUpdatePost = ( postType: PostType | null | undefined ): ( ( postId: number, updatedPost: Partial<Post> ) => void ) => {
+	return ( postId: number, updatedPost: Partial<Post> ) => {
+		const path = postType
+			? `/${ postType.rest_namespace }/${ postType.rest_base }`
+			: `/${ defaultRestNamespace }/posts`;
+
+		apiFetch( {
+			path: `/${ path }/${ postId }`,
+			method: 'POST',
+			data: updatedPost,
+		} )
+			.catch( ( error ) => {
+				// eslint-disable-next-line no-console
+				console.error( 'Error updating post:', error );
+			} );
+	};
+};
+
+const useCreatePost = ( postType: PostType | null | undefined ): ( ( newPost: Partial<Post> ) => void ) => {
+	return ( newPost: Partial<Post> ) => {
+		const path = postType
+			? `/${ postType.rest_namespace }/${ postType.rest_base }`
+			: `/${ defaultRestNamespace }/posts`;
+
+		apiFetch( {
+			path,
+			method: 'POST',
+			data: newPost,
+		} )
+			.catch( ( error ) => {
+				// eslint-disable-next-line no-console
+				console.error( 'Error creating post:', error );
+			} );
+	};
+};
+
+const useDeletePost = ( postType: PostType | null | undefined ): ( ( postId: number ) => void ) => {
+	return ( postId: number ) => {
+		const path = postType
+			? `/${ postType.rest_namespace }/${ postType.rest_base }`
+			: `/${ defaultRestNamespace }/posts`;
+
+		apiFetch( {
+			path: `/${ path }/${ postId }`,
+			method: 'DELETE',
+		} )
+			.catch( ( error ) => {
+				// eslint-disable-next-line no-console
+				console.error( 'Error deleting post:', error );
+			} );
+	};
+};
+
+export const usePosts = ( postType?: string | null ): {
+	posts: Post[];
+	getPosts: () => void;
+	updatePost: ( postId: number, updatedPost: Partial<Post> ) => void;
+	createPost: ( newPost: Partial<Post> ) => void;
+	deletePost: ( postId: number ) => void;
+	isLoading: boolean;
+} => {
+	const postTypes = usePostTypes();
+	const postTypeData = postTypes.find( ( type ) => type?.name === postType );
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const [ posts, fetchPosts, isLoading ] = useFetchPosts( postTypeData );
+	const updatePost = useUpdatePost( postTypeData );
+	const createPost = useCreatePost( postTypeData );
+	const deletePost = useDeletePost( postTypeData );
+
+	const getPosts = useMemo( () => {
+		return () => posts;
+	}, [ posts ] );
+
+	return {
+		posts,
+		getPosts,
+		updatePost,
+		createPost,
+		deletePost,
+		isLoading,
+	};
+};

package/src/init.ts

@@ -1,8 +1,12 @@
 import RecentlyEdited from './components/top-bar/recently-edited';
 import { injectIntoPageIndication } from '@elementor/editor-app-bar';
+import { injectIntoTop } from '@elementor/editor';
+import Shell from './components/panel/shell';
 
 export default function init() {
 	registerTopBarMenuItems();
+	// TODO 06/06/2023 : uncomment registerPanel() when we are ready to release
+	registerPanel();
 }
 
 function registerTopBarMenuItems() {
@@ -11,3 +15,11 @@ function registerTopBarMenuItems() {
 		filler: RecentlyEdited,
 	} );
 }
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function registerPanel() {
+	injectIntoTop( {
+		id: 'navigation-panel',
+		filler: Shell,
+	} );
+}

package/src/types.ts

@@ -0,0 +1,7 @@
+export type Page = {
+	isHome?: boolean;
+	id: number;
+	title: string;
+	status: string;
+	type: string;
+};