Export to Codesandbox

[AWolf81]

I've seen on JSUI an issue from @CompuIves for exporting the local project to Codesandbox and I like the idea to have a way to easily share the current project with others.

I'm working on it. Nothing pushed yet but exporting is working but I need to refactor it. So everything is in a new saga.

Info:
Codesandbox-cli can only export a CRA - so I've filtered Gatsby & Nextjs and hide the export section.

Todos:

• Add the basic business logic with codesandbox-cli for exporting
• Add live connection to code sandbox. Where should we add the connection button? I think in the ProjectConfigurationModal and in the ProjectPage would be great. Future feature of CLI - not supported yet.
• Improve styling. Improved but the save button is off-screen now. I think we should add an indicator that it has to be scrolled down & also disable auto-hide of scrollbars.
• Is it possible to pass the token to the cli command? Not needed as CLI remembers token and only asks once. I think revoking/changing token not supported by CLI.
• Check why the React logo in the exported project is not displayed in the Sandbox? https://codesandbox.io/s/q3p1nwzxm4 It's an issue with how Codesandbox is loading the SVG after changing the import to import logo from "!raw-loader!./logo.svg"; it's working. I'll add a comment to issue #747 at Codesandbox about it.

Codesandbox token flow
This is how I have it at the moment. Maybe needs to be improved.

1. Trigger an export with codesandbox <projectPath>
2. Automatically opens https://codesandbox.io/cli/login
3. User copies that token into an input field in Guppy
4. Trigger a new export with the token
5. On success, it will display a button in the export section to open the sandbox in browser.
6. On failure, it displays a message box about the error

Things to discuss

• Where should the export feature live? I've added it to ProjectConfigurationModal as export section.
• Codesandbox cli requires a token for accessing. I think this could be improved by blocking the export button if no token is available. Show a link to the token geneation page to get the token so the user can copy the token.
• Should we add a link to Codesandbox dashboard for managing the projects?
• Where should we store the token? App settings or per project? Or both? I think we'll start with app settings and maybe add a per project override later.