Add the components package with PathMappingControl

[adamziel]

Motivation for the change, related issues

Adds a PathMappingControl React component:

The goal is to eventually replace the current mapping control based on text inputs:

The long-term goal is to create a library of dependency-free components (well, aside of React) to reuse between Playground webapp, WordPress plugins, WordPress blocks, and the Blueprints builder. This path mapping widget will make a good fit for all these places.

Implementation details

The PathMappingControl uses WordPress components under the hood. Most notably, TreeGrid and Button. I considered using web components for portability, but decided against it because they:

• Wouldn't have the native WordPress look and feel
• Couldn't easily mix with WordPress components
• Had some issues around focus management

Testing Instructions (or ideally a Blueprint)

1. Run nx dev playground-components
2. Go to http://localhost:5173/
3. Play with the widget and confirm it works intuitively

Follow-up work

• Replace the text input under Absolute path in Playground with a UI-based picker or path autocompletion.
• Implement mapping validation to make sure there are no nested mappings, e.g. /wordpress/wp-content and /wordpress/wp-content/plugins.
• Reuse the base TreeGrid as a file browser in the Playground block (need asynchronous loading)

[bgrgicak]

We should check if the path is valid. For example, I'm able to store a space as a path.

[adamziel]

Agreed on validation, although a space is a valid path:

$ echo "test" > " "
$ cat " "
test

In fact, almost everything is a valid path. There are some characters that can't be used in paths, such as :. AFAIR paths are bytes and don't conform to any specific encoding like UTF-8. More research is needed here to figure out how to validate paths.

On your screenshot I see another problem – we're removing whitespaces from the user input, I no longer think we should do that.

[brandonpayton]

If we are going to support less common values like directory names with trailing spaces, perhaps we should display some kind of outline around the text to clearly mark its bounds, at least in cases where the bounds cannot be visually ascertained.

[bgrgicak]

although a space is a valid path

I learned something new today 😀

[adamziel]

I'll remove this from the board for now. We'll need it sooner than later but let's not occupy a space in a queue.

[adamziel]

UX idea: display select boxes for path selection, not inputs. Options:

• Plugin
• Theme
• Mu-plugin
• Uploads
• Wp-content
• WordPress root
• Custom path -> this one shows an input

In v2 we could also add a magic "guess" button to infer the role of every path in the tree.

[brandonpayton]

UX idea: display select boxes for path selection, not inputs. Options:

Nice. This would reduce the opportunity for typos, and selection sounds less stressful to me than having to remember and type the correct path.

[adamziel]

There are improvements we could do here, but I'll go ahead and merge as it's not used anywhere and I'd like to play with it in a draft branch.