Add CodeSandbox

[agilgur5]

Having a CodeSandbox in the docs would be very useful as a quick example folks can use to try it out and use it in real code simultaneously.

I was hoping to easily hook it up to the gh-pages branch last week, but this is not quite so easy, so will document/note down some things here

[agilgur5]

RE: gh-pages branch difficulty
Initially I just got a blank screen in the preview, but realized this was because I was blocking a bunch of things (e.g. ata-fetcher). Once I unblocked stuff, it did the little loading animation and then showed a blank screen again. DevTools showed a few unhelpful error messages like:

t {id: "punycode", exports: {…}, parent: t, filename: "punycode", loaded: false, …} "had trouble loading..."
vendors~app.58180fdb.chunk.js:28 Uncaught Error: Error: ENOENT: No such file or directory., '/sandbox/punycode'
GET https://ata-fetcher.cloud/api/v5/typings/babel-core@6.26.3.json 422
gh-pages:1 Not allowed to load local resource: file:///extensions/markdown-language-features/media/PreviewOnRightPane_16x_dark.svg

Then I found out CodeSandbox only supports CRA in Browser Sandboxes (see template in the sandbox configuration), and only supports custom webpack (etc) in Container Sandboxes.

I would think the gh-pages branch would be compatible with CRA, but I guess not :/ . Though the error messages don't exactly help figure out what the exact issues are :/. Had to create a new branch to support CRA and CodeSandbox since the gh-pages branch isn't compatible for a few reasons (some that can't be fixed to support both simultaneously -- like gh-pages loading index.html from repo root and CRA from public/)

[agilgur5]

It took a little while to figure out the CRA branch, especially since I had to update Node for CRA, CRA is a massive, slow install (maybe I really should use pnpm to help with this), I had to re-install it again after I uninstalled the devDeps as otherwise npm would try to re-use the existing, outdated ones, and then had 1 styling issue afterward for some reason.

But once that was done, just had to move a bunch of files/config around and then worked instantly on CodeSandbox!

The branch is currently at cra-example and the CodeSandbox loads the branch directly at https://codesandbox.io/s/github/agilgur5/react-signature-canvas/tree/cra-example

[agilgur5]

So now just need to add the CodeSandbox to the docs. I'm thinking of combining the Example and Demo section into one bigger Examples section with ordered bullets like:

1. View the live demo ....
2. Play with the CodeSandbox ....
3. View some example code here ...

Not as cool as a heading link, but works and feels more organized than like 3 separate sections.

I had also been thinking of embedding a CodeSandbox into the README, but yea that ain't possible in GitHub itself. (GitHub would be verrrry different if you could embed stuff). Could do it on a custom docs GH Page if I realllly wanted to though. But maybe now is a good time to finally add a GIF to the README