@wordpress/boot 0.1.1-next.2f1c7c01b.0

package/src/components/navigation/navigation-item/index.tsx

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	FlexBlock,
+	__experimentalItem as Item,
+	// @ts-ignore
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import RouterLinkItem from '../router-link-item';
+import { wrapIcon } from '../items';
+import type { IconType } from '../../../store/types';
+import './style.scss';
+
+interface NavigationItemProps {
+	/**
+	 * Optional CSS class name.
+	 */
+	className?: string;
+	/**
+	 * Icon to display with the navigation item.
+	 */
+	icon?: IconType;
+	/**
+	 * Whether to show placeholder icons for alignment.
+	 */
+	shouldShowPlaceholder?: boolean;
+	/**
+	 * Content to display inside the navigation item.
+	 */
+	children: ReactNode;
+	/**
+	 * The path to navigate to.
+	 */
+	to: string;
+}
+
+export default function NavigationItem( {
+	className,
+	icon,
+	shouldShowPlaceholder = true,
+	children,
+	to,
+}: NavigationItemProps ) {
+	// Check if the 'to' prop is an external URL
+	const isExternal = ! String(
+		new URL( to, window.location.origin )
+	).startsWith( window.location.origin );
+
+	const content = (
+		<HStack justify="flex-start" spacing={ 2 } style={ { flexGrow: '1' } }>
+			{ wrapIcon( icon, shouldShowPlaceholder ) }
+			<FlexBlock>{ children }</FlexBlock>
+		</HStack>
+	);
+
+	if ( isExternal ) {
+		// Render as a regular anchor tag for external URLs
+		return (
+			<Item
+				as="a"
+				href={ to }
+				className={ clsx( 'boot-navigation-item', className ) }
+			>
+				{ content }
+			</Item>
+		);
+	}
+
+	return (
+		<RouterLinkItem
+			to={ to }
+			className={ clsx( 'boot-navigation-item', className ) }
+		>
+			{ content }
+		</RouterLinkItem>
+	);
+}

package/src/components/navigation/navigation-item/style.scss

@@ -0,0 +1,52 @@
+@use "@wordpress/base-styles/variables";
+@use "@wordpress/base-styles/mixins";
+
+.boot-navigation-item.components-item {
+	color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
+	padding-inline: variables.$grid-unit-05;
+	padding-block: 0;
+	margin-inline: variables.$grid-unit-15;
+	margin-block-end: variables.$grid-unit-05;
+	width: calc(100% - variables.$grid-unit-15 * 2);
+	border: none;
+	min-height: variables.$grid-unit-40;
+	display: flex;
+	align-items: center;
+	@include mixins.body-medium();
+
+	.boot-dropdown-item__children & {
+		min-height: variables.$grid-unit-30;
+	}
+
+	// Rounded focus ring
+	border-radius: var(--wpds-border-radius-small, 2px);
+
+	&.active,
+	&:hover,
+	&:focus,
+	&[aria-current="true"] {
+		color: var(--wpds-color-fg-interactive-brand-active, #0073aa);
+	}
+
+	&.active {
+		font-weight: variables.$font-weight-medium;
+	}
+
+	svg:last-child {
+		padding: variables.$grid-unit-05;
+	}
+
+	&[aria-current="true"] {
+		color: var(--wpds-color-fg-interactive-brand-active, #0073aa);
+		font-weight: variables.$font-weight-medium;
+	}
+
+	// Make sure the focus style is drawn on top of the current item background.
+	&:focus-visible {
+		transform: translateZ(0);
+	}
+
+	&.with-suffix {
+		padding-right: variables.$grid-unit-20;
+	}
+}

package/src/components/navigation/navigation-screen/index.tsx

@@ -0,0 +1,147 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode, RefObject } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHeading as Heading,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+	Button,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { isRTL, __ } from '@wordpress/i18n';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
+import { useReducedMotion } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const ANIMATION_DURATION = 0.3;
+const slideVariants = {
+	initial: ( direction: 'forward' | 'backward' ) => ( {
+		x: direction === 'forward' ? 100 : -100,
+		opacity: 0,
+	} ),
+	animate: {
+		x: 0,
+		opacity: 1,
+	},
+	exit: ( direction: 'forward' | 'backward' ) => ( {
+		x: direction === 'forward' ? 100 : -100,
+		opacity: 0,
+	} ),
+};
+
+export default function NavigationScreen( {
+	isRoot,
+	title,
+	actions,
+	content,
+	description,
+	animationDirection,
+	backMenuItem,
+	backButtonRef,
+	navigationKey,
+	onNavigate,
+}: {
+	isRoot?: boolean;
+	title: string;
+	actions?: ReactNode;
+	content: ReactNode;
+	description?: ReactNode;
+	backMenuItem?: string;
+	backButtonRef?: RefObject< HTMLButtonElement >;
+	animationDirection?: 'forward' | 'backward';
+	navigationKey?: string;
+	onNavigate: ( {
+		id,
+		direction,
+	}: {
+		id?: string;
+		direction: 'forward' | 'backward';
+	} ) => void;
+} ) {
+	const icon = isRTL() ? chevronRight : chevronLeft;
+	const disableMotion = useReducedMotion();
+
+	const handleBackClick = ( e: React.MouseEvent ) => {
+		e.preventDefault();
+		onNavigate( { id: backMenuItem, direction: 'backward' } );
+	};
+
+	return (
+		<div
+			className="boot-navigation-screen"
+			style={ {
+				overflow: 'hidden',
+				position: 'relative',
+				display: 'grid',
+				gridTemplateColumns: '1fr',
+				gridTemplateRows: '1fr',
+			} }
+		>
+			<AnimatePresence initial={ false }>
+				<motion.div
+					key={ navigationKey }
+					custom={ animationDirection }
+					variants={ slideVariants }
+					initial="initial"
+					animate="animate"
+					exit="exit"
+					transition={ {
+						type: 'tween',
+						duration: disableMotion ? 0 : ANIMATION_DURATION,
+						ease: [ 0.33, 0, 0, 1 ],
+					} }
+					style={ {
+						width: '100%',
+						gridColumn: '1',
+						gridRow: '1',
+					} }
+				>
+					<HStack
+						spacing={ 2 }
+						className="boot-navigation-screen__title-icon"
+					>
+						{ ! isRoot && (
+							<Button
+								ref={ backButtonRef }
+								icon={ icon }
+								onClick={ handleBackClick }
+								label={ __( 'Back' ) }
+								size="small"
+								variant="tertiary"
+							/>
+						) }
+						<Heading
+							className="boot-navigation-screen__title"
+							level={ 1 }
+							size="15px"
+						>
+							{ title }
+						</Heading>
+						{ actions && (
+							<div className="boot-navigation-screen__actions">
+								{ actions }
+							</div>
+						) }
+					</HStack>
+
+					{ description && (
+						<div className="boot-navigation-screen__description">
+							{ description }
+						</div>
+					) }
+
+					{ content }
+				</motion.div>
+			</AnimatePresence>
+		</div>
+	);
+}

package/src/components/navigation/navigation-screen/style.scss

@@ -0,0 +1,34 @@
+@use "@wordpress/base-styles/variables";
+
+.boot-navigation-screen {
+	// Avoid cutting off focus ring of the last menu item
+	padding-block-end: variables.$grid-unit-05;
+}
+
+.boot-navigation-screen .components-text {
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+}
+
+.boot-navigation-screen__title-icon {
+	position: sticky;
+	top: 0;
+	padding:
+		variables.$grid-unit-15 variables.$grid-unit-20
+		variables.$grid-unit-10 variables.$grid-unit-20;
+}
+
+.boot-navigation-screen__title {
+	flex-grow: 1;
+	overflow-wrap: break-word;
+
+	&#{&},
+	&#{&} .boot-navigation-screen__title {
+		line-height: variables.$font-line-height-x-large;
+		color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	}
+}
+
+.boot-navigation-screen__actions {
+	display: flex;
+	flex-shrink: 0;
+}

package/src/components/navigation/path-matching.ts

@@ -0,0 +1,149 @@
+/**
+ * Internal dependencies
+ */
+import type { MenuItem } from '../../store/types';
+
+/**
+ * Checks if a menu path is a valid parent path of the current path.
+ * A valid parent path must be a complete path prefix, not just share segments.
+ *
+ * @param currentPath - Current page path
+ * @param menuPath    - Menu item path to check as potential parent
+ * @return True if menuPath is a parent of currentPath
+ */
+const isValidParentPath = (
+	currentPath: string,
+	menuPath: string
+): boolean => {
+	if ( ! menuPath || menuPath === currentPath ) {
+		return false;
+	}
+
+	// Normalize paths by removing trailing slashes and ensuring leading slash
+	const normalizePath = ( path: string ) => {
+		const normalized = path.startsWith( '/' ) ? path : '/' + path;
+		return normalized.endsWith( '/' ) && normalized.length > 1
+			? normalized.slice( 0, -1 )
+			: normalized;
+	};
+
+	const normalizedCurrent = normalizePath( currentPath );
+	const normalizedMenu = normalizePath( menuPath );
+
+	// Menu path must be shorter and current path must start with menu path + '/'
+	return (
+		normalizedCurrent.startsWith( normalizedMenu ) &&
+		( normalizedCurrent[ normalizedMenu.length ] === '/' ||
+			normalizedMenu === '/' )
+	);
+};
+
+/**
+ * Finds the menu item that is the closest parent of the current path.
+ * Only considers menu items that have a 'to' path defined and are valid parents.
+ *
+ * @param currentPath - Current page path
+ * @param menuItems   - Array of all menu items
+ * @return Menu item that is the closest parent, or null if no valid parent found
+ */
+export const findClosestMenuItem = (
+	currentPath: string,
+	menuItems: MenuItem[]
+): MenuItem | null => {
+	const exactMatch = menuItems.find( ( item ) => item.to === currentPath );
+	if ( exactMatch ) {
+		return exactMatch;
+	}
+
+	let bestMatch: MenuItem | null = null;
+	let bestPathLength = 0;
+
+	for ( const item of menuItems ) {
+		if ( ! item.to ) {
+			continue;
+		}
+
+		// Only consider items that are valid parents of the current path
+		if ( isValidParentPath( currentPath, item.to ) ) {
+			// Prefer the longest parent path (most specific)
+			if ( item.to.length > bestPathLength ) {
+				bestMatch = item;
+				bestPathLength = item.to.length;
+			}
+		}
+	}
+
+	return bestMatch;
+};
+
+/**
+ * Finds the drilldown parent of a menu item by traversing up the menu tree.
+ *
+ * @param id        - The ID of the menu item to find the drilldown parent for
+ * @param menuItems - Array of all menu items
+ * @return The ID of the drilldown parent, or undefined if none found
+ */
+export const findDrilldownParent = (
+	id: string | undefined,
+	menuItems: MenuItem[]
+): string | undefined => {
+	if ( ! id ) {
+		return undefined;
+	}
+
+	const currentItem = menuItems.find( ( item ) => item.id === id );
+	if ( ! currentItem ) {
+		return undefined;
+	}
+
+	// If the item has a parent, check if that parent is a drilldown
+	if ( currentItem.parent ) {
+		const parentItem = menuItems.find(
+			( item ) => item.id === currentItem.parent
+		);
+
+		if ( parentItem?.parent_type === 'drilldown' ) {
+			return parentItem.id;
+		}
+
+		if ( parentItem ) {
+			return findDrilldownParent( parentItem.id, menuItems );
+		}
+	}
+
+	return undefined;
+};
+
+/**
+ * Finds the dropdown parent of a menu item.
+ *
+ * @param id        - The ID of the menu item to find the dropdown parent for
+ * @param menuItems - Array of all menu items
+ * @return The ID of the dropdown parent, or undefined if none found
+ */
+export const findDropdownParent = (
+	id: string | undefined,
+	menuItems: MenuItem[]
+): string | undefined => {
+	if ( ! id ) {
+		return undefined;
+	}
+
+	const currentItem = menuItems.find( ( item ) => item.id === id );
+	if ( ! currentItem ) {
+		return undefined;
+	}
+
+	// If the item has a parent, check if that parent is a dropdown
+	if ( currentItem.parent ) {
+		const parentItem = menuItems.find(
+			( item ) => item.id === currentItem.parent
+		);
+
+		if ( parentItem?.parent_type === 'dropdown' ) {
+			return parentItem.id;
+		}
+	}
+
+	return undefined;
+};

package/src/components/navigation/router-link-item.tsx

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { createLink } from '@tanstack/react-router';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import { __experimentalItem as Item } from '@wordpress/components';
+
+function AnchorOnlyItem(
+	props: React.ComponentProps< typeof Item >,
+	forwardedRef: ForwardedRef< HTMLAnchorElement >
+) {
+	return <Item as="a" ref={ forwardedRef } { ...props } />;
+}
+
+const RouterLinkItem = createLink( forwardRef( AnchorOnlyItem ) );
+
+export default RouterLinkItem;

package/src/components/navigation/use-sidebar-parent.ts

@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import { useRouter, useMatches } from '@tanstack/react-router';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../../store';
+import {
+	findDrilldownParent,
+	findDropdownParent,
+	findClosestMenuItem,
+} from './path-matching';
+
+/**
+ * The `useSidebarParent` hook returns the ID of the parent menu item
+ * to render in the sidebar based on the current route.
+ *
+ * - It finds the closest matching menu item when exact path matches fail
+ * - It allows the user to navigate in the sidebar (local state) without changing the URL.
+ * - If the URL changes, it will update the parent ID to ensure the correct drilldown level is displayed.
+ *
+ * @return The ID of the parent menu item to render in the sidebar.
+ */
+export function useSidebarParent() {
+	const matches = useMatches();
+	const router = useRouter();
+	const menuItems = useSelect(
+		( select ) =>
+			// @ts-ignore
+			select( STORE_NAME ).getMenuItems(),
+		[]
+	);
+
+	const currentPath = matches[ matches.length - 1 ].pathname.slice(
+		router.options.basepath?.length ?? 0
+	);
+
+	const currentMenuItem = findClosestMenuItem( currentPath, menuItems );
+	const [ parentId, setParentId ] = useState< string | undefined >(
+		findDrilldownParent( currentMenuItem?.id, menuItems )
+	);
+	const [ parentDropdownId, setParentDropdownId ] = useState<
+		string | undefined
+	>( findDropdownParent( currentMenuItem?.id, menuItems ) );
+
+	// Effect to update parent IDs when URL or menu items change
+	useEffect( () => {
+		const matchedMenuItem = findClosestMenuItem( currentPath, menuItems );
+		// Find the appropriate parents for the current route
+		const updatedParentId = findDrilldownParent(
+			matchedMenuItem?.id,
+			menuItems
+		);
+		const updatedDropdownParent = findDropdownParent(
+			matchedMenuItem?.id,
+			menuItems
+		);
+
+		setParentId( updatedParentId );
+		setParentDropdownId( updatedDropdownParent );
+	}, [ currentPath, menuItems ] );
+
+	return [
+		parentId,
+		setParentId,
+		parentDropdownId,
+		setParentDropdownId,
+	] as const;
+}

package/src/components/root/index.tsx

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { Outlet } from '@tanstack/react-router';
+
+/**
+ * WordPress dependencies
+ */
+// @ts-expect-error Commands is not typed properly.
+import { CommandMenu } from '@wordpress/commands';
+import { privateApis as themePrivateApis } from '@wordpress/theme';
+
+/**
+ * Internal dependencies
+ */
+import Sidebar from '../sidebar';
+import { unlock } from '../../lock-unlock';
+import './style.scss';
+
+const { ThemeProvider } = unlock( themePrivateApis );
+
+export default function Root() {
+	return (
+		<ThemeProvider isRoot color={ { bg: '#f8f8f8', primary: '#3858e9' } }>
+			<ThemeProvider color={ { bg: '#1e1e1e', primary: '#3858e9' } }>
+				<div className="boot-layout">
+					<CommandMenu />
+					<div className="boot-layout__sidebar">
+						<Sidebar />
+					</div>
+					<div className="boot-layout__surfaces">
+						<ThemeProvider
+							color={ { bg: '#ffffff', primary: '#3858e9' } }
+						>
+							<Outlet />
+						</ThemeProvider>
+					</div>
+				</div>
+			</ThemeProvider>
+		</ThemeProvider>
+	);
+}

package/src/components/root/style.scss

@@ -0,0 +1,41 @@
+@use "@wordpress/base-styles/variables";
+
+.boot-layout {
+	height: 100%;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	isolation: isolate;
+	background: var(--wpds-color-bg-surface-neutral-weak, #f0f0f0);
+}
+
+.boot-layout__sidebar {
+	height: 100%;
+	flex-shrink: 0;
+	width: 240px;
+	position: relative;
+	overflow: hidden;
+}
+
+.boot-layout__surfaces {
+	display: flex;
+	flex-grow: 1;
+	margin: variables.$grid-unit-10;
+	gap: variables.$grid-unit-10;
+}
+
+.boot-layout__stage,
+.boot-layout__inspector {
+	flex: 1;
+	overflow-y: auto;
+	background: var(--wpds-color-bg-surface-neutral, #fff);
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	border-radius: 8px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	border: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #ddd);
+}
+
+.boot-layout__inspector {
+	max-width: 400px;
+}

package/src/components/sidebar/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import SiteHub from '../site-hub';
+import Navigation from '../navigation';
+import './style.scss';
+
+export default function Sidebar() {
+	return (
+		<div className="boot-sidebar__scrollable">
+			<SiteHub />
+			<div className="boot-sidebar__content">
+				<Navigation />
+			</div>
+		</div>
+	);
+}

package/src/components/sidebar/style.scss

@@ -0,0 +1,15 @@
+@use "@wordpress/base-styles/variables";
+
+.boot-sidebar__scrollable {
+	overflow: auto;
+	height: 100%;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+}
+
+.boot-sidebar__content {
+	flex-grow: 1;
+	contain: content;
+	position: relative;
+}