Add default button and example

[akinsho]

fixes #37

[bryphe]

For the default <Button /> styling - I think we should decouple this from the monitor size, and instead using some default padding (along with perhaps a minWidth). It'd be helpful to be able to drop a <Button /> anywhere, like in a side-pane - my concern is if we base it on 30% of the monitor size, it might not fit well in places you drop it (like if we had a 'left pane' / 'sidebar' for our examples)

[bryphe]

Thanks for the work on this and the feedback! It's looking really cool 👍

Had one piece of feedback regarding the default width sizing - let me know what you think.

[akinsho]

@bryphe I've tweaked what you suggested (was more of a thing I had to test it out), I'm trying to make the example more dynamic using a stateHook to trigger a counter to show that disabled buttons do nothing and enabled buttons work but I don't think I'm using the hook correctly or else there a bug somewhere I could use some input 🙏

[OhadRau]

@Akin909 any luck figuring out that bug yet? I looked through the code and couldn't find a clear issue. FWIW your use of useState looked identical to the way it's used in examples/Bin.re so I don't think that's the culprit.

[akinsho]

@OhadRau thanks for having a look 👍 , the strange thing is that the the click event doesn't seem to work, I'm not sure if the state isn't updating, or if the onClick function isn't being called, I'm beginning to think that the event might be being blocked, or is not transmitting through properly

[OhadRau]

Ah, I think I tracked it down. Looks like this is a rendering bug since printing from onMouseDown/onMouseUp works but the opacity isn't getting set. Not sure why, but the view doesn't seem to get rerendered here at all.

I thought the bug might be that setShouldRenderCallback isn't getting called, since the only current call to setShouldRenderCallback occurs when there's an animation. However, changing that doesn't cause it to re-render here for some reason... though the counter is certainly being incremented:

Will have to investigate this some more later

@Akin909

[akinsho]

Thanks for such a thorough look @OhadRau, much appreciated I'm still trying to figure out how to debug stuff effectively in this environment. I'll have a look into why the render callback doesn't return true

[bryphe]

Thanks @Akin909 and @OhadRau for the detailed investigation (and for logging the bug #170 ). I put together a proposal for a fix #171 (and verified it unblocks this too 👍 ).

[akinsho]

@bryphe thanks for fixing #170 👍, that seems to have unblocked this, any chance you can re-review when you get a chance?

[bryphe]

Just tried it out and it works great! Thanks for your work on this, @Akin909 ! 🎉

[akinsho]

@bryphe CI seems to be failing but I cant figure out why. The esy.lock changed for reasons I don't quite understand could be that I'm not running the right version of esy 😕 I can't restart it though and I'm not sure what to make of the error

[bryphe]

Sorry about the build issues, @Akin909 ! Not related to your changes - working on fixing them in #178

[bryphe]

The code changes look great! 💯 I'll bring them in and continue working on the build failure in #178 .

So nice to have a base <Button /> control now - thanks for all the work on this!