Export palette as a JSON

[ziyafenn]

Created a function to export palettes as a JSON

Code can be further refactored to reduce the repeats in code. I don't have enough time right now to make it better, probably sometime later.

For time being, it gets its job done.

Also added modal and button components.

#4

[edelstone]

Thanks @ziyafenn ! I'll look closer later today.

Playing with it in the browser, I'm wondering if it's possible to control focus a little bit, for example when the dialog opens place focus on the close span, and when it closes, place focus back on export palette button.

If that's relatively simple I'd love to try to get that in there. I'll check the code shortly.

[edelstone]

This looks all good @ziyafenn. Let me know if you're interested in trying to get the focus a bit more standard as mentioned above. Otherwise I'll likely merge this and make a new issue.

[ziyafenn]

hey @edelstone.
I believe your comments are due to accessibility reasons? If yes, instead of focus, correct tabindex should be implemented. It makes sense to focus on textarea, once modal is open, but in our case it set to readonly, so there is no need to focus in my opinion.

Here is the article from developers.google about focus and tabindex.

I will try now implement the modal in a way, that once it is displayed, first tab will focus on close button.
And on page itself, first tab will focus on export button.

[ziyafenn]

I pushed a commit that fixes those issues:

1. On page, first tab press focuses on export button
2. On modal, it sets focus automatically on first/last possible element, which in our case is close button. I'm not sure that it is good to autofocus on close, but i wasn't been able to remove that.

PS.
my linter decided to reformat all the code... / added new commit to fix it

[edelstone]

Hi @ziyafenn . Thanks for the update, and the overall work.