Allow registration of custom buttons

[josephfusco]

Solves #31

This also registers a new share button as an example, using @wordpress/icons package 🎉

• encode using LZString
• decode using LZString
• Implement clipboard functionality & notify user (currently console.log) notification system is out of scope of this PR

Props to @jasonbahl for the POC 🙌🏻

[jasonbahl]

see my comment about the query query_arg.

Then, I think my P.O.C might have been a bit too naiive.

I think we might want to abstract a few things to make this more "error proof" so to speak.

For example, instead of requiring each Button to import and know about the <ToolbarButton>, <Icon> and <VisuallyHidden> components, we could include those elements within our object.entries.map() and render the component based on "props" in the toolbarButtons.

for example, when I do add_menu_page() in WordPress, I pass along strings of data, like: page_title, menu_title, menu_slug, etc and the UI is built for me.

I think ultimately we probably want that type of DX.

The buttons will all be given a consistent look, a tooltip, etc. . .all you need to provide is the label, the icon, the tooltip description and an onClick callback.

So the end user might do something like:

registerGraphiqlToolbarButton({
  name: "share",
  label: "Share current document",
  icon: () => { return <SomeIcon /> },
  description: "The tooltip description",
  onClick: () => { // this executes when the button is clicked }
});

I, of course, never mentioned that this is the type of API I would like to see, so definitely no reason you should have expected to provide it, but I think ultimately that's where this should go.

Similar to register_graphql_field, register_post_type, register_taxonomy, etc

I'm working on a similar style "registry" API for the "plugins" to add the "Help" plugin, so hopefully that can shed light on the implementation details I have in mind a bit more.

[jasonbahl]

re: registerToolbarButton (or whatever we call it), I think that in the redux store we should have a list of buttons. Then functions like registerToolbarButton or deregisterToolbarButton will add to / remove from that list.

Then the list, after any addition/removal has been done, is rendered to the toolbar.

[josephfusco]

💯 I am with you on abstracting things out more, but in a follow up PR.

Related: #60 (comment)

What you have laid out makes good sense to me.
Mind creating a separate ticket to improve the developer interface? Thank you 🙌🏻

[jasonbahl]

@josephfusco I opened a follow-up issue here: #62

[jasonbahl]

@josephfusco looks like a test needs updated to reflect the change to the functionality (moving from multiple supported url query params to 1 hashed param)