Create tree-control component (#36432)

packages/js/components/changelog/add-35851-tree-control

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Create tree-control component

packages/js/components/src/experimental-tree-control/hooks/use-linked-tree.ts

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { useMemo } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Item, LinkedTree } from '../types';
+
+type MemoItems = {
+	[ value: Item[ 'value' ] ]: LinkedTree;
+};
+
+function findChildren(
+	items: Item[],
+	parent?: Item[ 'parent' ],
+	memo: MemoItems = {}
+): LinkedTree[] {
+	const children: Item[] = [];
+	const others: Item[] = [];
+
+	items.forEach( ( item ) => {
+		if ( item.parent === parent ) {
+			children.push( item );
+		} else {
+			others.push( item );
+		}
+		memo[ item.value ] = {
+			parent: undefined,
+			data: item,
+			children: [],
+		};
+	} );
+
+	return children.map( ( child ) => {
+		const linkedTree = memo[ child.value ];
+		linkedTree.parent = child.parent ? memo[ child.parent ] : undefined;
+		linkedTree.children = findChildren( others, child.value, memo );
+		return linkedTree;
+	} );
+}
+
+export function useLinkedTree( items: Item[] ): LinkedTree[] {
+	const linkedTree = useMemo( () => {
+		return findChildren( items, undefined, {} );
+	}, [ items ] );
+
+	return linkedTree;
+}

packages/js/components/src/experimental-tree-control/hooks/use-tree-item.ts

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { TreeItemProps } from '../types';
+
+export function useTreeItem( { item, level, ...props }: TreeItemProps ) {
+	const nextLevel = level + 1;
+	const nextHeadingPaddingLeft = ( level - 1 ) * 28 + 12;
+
+	return {
+		item,
+		level: nextLevel,
+		treeItemProps: {
+			...props,
+		},
+		headingProps: {
+			style: {
+				paddingLeft: nextHeadingPaddingLeft,
+			},
+		},
+		treeProps: {
+			items: item.children,
+			level: nextLevel,
+		},
+	};
+}

packages/js/components/src/experimental-tree-control/hooks/use-tree.ts

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { TreeProps } from '../types';
+
+export function useTree( { ref, items, level = 1, ...props }: TreeProps ) {
+	return {
+		level,
+		items,
+		treeProps: {
+			...props,
+		},
+		treeItemProps: {
+			level,
+		},
+	};
+}

packages/js/components/src/experimental-tree-control/index.ts

@@ -0,0 +1,4 @@
+export * from './tree';
+export * from './tree-control';
+export * from './tree-item';
+export * from './types';

packages/js/components/src/experimental-tree-control/stories/index.tsx

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { BaseControl } from '@wordpress/components';
+import React, { createElement } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { TreeControl } from '../tree-control';
+import { Item } from '../types';
+
+const listItems: Item[] = [
+	{ value: '1', label: 'Technology' },
+	{ value: '1.1', label: 'Notebooks', parent: '1' },
+	{ value: '1.2', label: 'Phones', parent: '1' },
+	{ value: '1.2.1', label: 'iPhone', parent: '1.2' },
+	{ value: '1.2.1.1', label: 'iPhone 14 Pro', parent: '1.2.1' },
+	{ value: '1.2.1.2', label: 'iPhone 14 Pro Max', parent: '1.2.1' },
+	{ value: '1.2.2', label: 'Samsung', parent: '1.2' },
+	{ value: '1.2.2.1', label: 'Samsung Galaxy 22 Plus', parent: '1.2.2' },
+	{ value: '1.2.2.2', label: 'Samsung Galaxy 22 Ultra', parent: '1.2.2' },
+	{ value: '1.3', label: 'Wearables', parent: '1' },
+	{ value: '2', label: 'Hardware' },
+	{ value: '2.1', label: 'CPU', parent: '2' },
+	{ value: '2.2', label: 'GPU', parent: '2' },
+	{ value: '2.3', label: 'Memory RAM', parent: '2' },
+	{ value: '3', label: 'Other' },
+];
+
+export const SimpleTree: React.FC = () => {
+	return (
+		<BaseControl label="Simple tree" id="simple-tree">
+			<TreeControl id="simple-tree" items={ listItems } />
+		</BaseControl>
+	);
+};
+
+export default {
+	title: 'WooCommerce Admin/experimental/TreeControl',
+	component: TreeControl,
+};

packages/js/components/src/experimental-tree-control/tree-control.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { createElement, forwardRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { useLinkedTree } from './hooks/use-linked-tree';
+import { Tree } from './tree';
+import { TreeControlProps } from './types';
+
+export const TreeControl = forwardRef( function ForwardedTree(
+	{ items, ...props }: TreeControlProps,
+	ref: React.ForwardedRef< HTMLOListElement >
+) {
+	const linkedTree = useLinkedTree( items );
+
+	return <Tree { ...props } ref={ ref } items={ linkedTree } />;
+} );

packages/js/components/src/experimental-tree-control/tree-item.scss

@@ -0,0 +1,34 @@
+.experimental-woocommerce-tree-item {
+	margin: 0;
+
+	&__heading {
+		display: flex;
+		flex-grow: 1;
+		gap: $gap-smaller;
+		min-height: $gap-largest;
+		padding: 0 $gap-small;
+		border-radius: 2px;
+
+		&:hover,
+		&:focus-within {
+			outline: 1.5px solid var( --wp-admin-theme-color );
+			outline-offset: -1.5px;
+		}
+
+		&:hover,
+		&:focus-within {
+			background-color: $gray-0;
+		}
+	}
+	&__label {
+		display: flex;
+		flex-grow: 1;
+		align-items: center;
+		padding: $gap-smaller $gap-small $gap-smaller 0;
+		position: relative;
+
+		> span {
+			display: block;
+		}
+	}
+}

packages/js/components/src/experimental-tree-control/tree-item.tsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
+import { createElement, forwardRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { useTreeItem } from './hooks/use-tree-item';
+import { Tree } from './tree';
+import { TreeItemProps } from './types';
+
+export const TreeItem = forwardRef( function ForwardedTreeItem(
+	props: TreeItemProps,
+	ref: React.ForwardedRef< HTMLLIElement >
+) {
+	const { item, treeItemProps, headingProps, treeProps } = useTreeItem( {
+		...props,
+		ref,
+	} );
+
+	return (
+		<li
+			{ ...treeItemProps }
+			className={ classNames(
+				treeItemProps.className,
+				'experimental-woocommerce-tree-item'
+			) }
+		>
+			<div
+				{ ...headingProps }
+				className="experimental-woocommerce-tree-item__heading"
+			>
+				<div className="experimental-woocommerce-tree-item__label">
+					<span>{ item.data.label }</span>
+				</div>
+			</div>
+
+			{ Boolean( item.children.length ) && <Tree { ...treeProps } /> }
+		</li>
+	);
+} );

packages/js/components/src/experimental-tree-control/tree.scss

@@ -0,0 +1,15 @@
+@import './tree-item.scss';
+
+.experimental-woocommerce-tree {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+
+	&--level-1 {
+		max-height: 280px;
+		overflow-y: auto;
+		background-color: $white;
+		border: 1px solid $gray-400;
+		border-radius: 2px;
+	}
+}

packages/js/components/src/experimental-tree-control/tree.tsx

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { createElement, forwardRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { useTree } from './hooks/use-tree';
+import { TreeItem } from './tree-item';
+import { TreeProps } from './types';
+
+export const Tree = forwardRef( function ForwardedTree(
+	props: TreeProps,
+	ref: React.ForwardedRef< HTMLOListElement >
+) {
+	const { level, items, treeProps, treeItemProps } = useTree( {
+		...props,
+		ref,
+	} );
+
+	if ( ! items.length ) return null;
+	return (
+		<ol
+			{ ...treeProps }
+			className={ classNames(
+				treeProps.className,
+				'experimental-woocommerce-tree',
+				`experimental-woocommerce-tree--level-${ level }`
+			) }
+		>
+			{ items.map( ( child ) => (
+				<TreeItem
+					{ ...treeItemProps }
+					key={ child.data.value }
+					item={ child }
+				/>
+			) ) }
+		</ol>
+	);
+} );

packages/js/components/src/experimental-tree-control/types.ts

@@ -0,0 +1,31 @@
+export interface Item {
+	parent?: string;
+	value: string;
+	label: string;
+}
+
+export interface LinkedTree {
+	parent?: LinkedTree;
+	data: Item;
+	children: LinkedTree[];
+}
+
+export type TreeProps = React.DetailedHTMLProps<
+	React.OlHTMLAttributes< HTMLOListElement >,
+	HTMLOListElement
+> & {
+	level?: number;
+	items: LinkedTree[];
+};
+
+export type TreeItemProps = React.DetailedHTMLProps<
+	React.LiHTMLAttributes< HTMLLIElement >,
+	HTMLLIElement
+> & {
+	level: number;
+	item: LinkedTree;
+};
+
+export type TreeControlProps = Omit< TreeProps, 'items' | 'level' > & {
+	items: Item[];
+};