Storybook/docs: Add link to Codesandbox version of demo

[iansan5653]

As someone who works with Primer React components often, I regularly want to fire up a quick sandbox to test some things out and experiment with the demos.

The interactive examples in the docs are nice for quick experiments but not ideal because they have no IDE features and you can't generate a link to your edited demo. Most importantly, this editability is going away in the new docs.

The controls in the Storybook are OK for playing with props but they are finicky (often misconfigured) and don't let you edit code at all.

It would be useful to have a link to generate a sandbox for testing stuff out, and Codesandbox.io would work really well for this. They have an API that allows building URLs to create pre-configured sandboxes.

It's pretty easy to make a URL that creates a sandbox with the latest version of Primer React:

import { getParameters } from 'codesandbox/lib/api/define';
 
const parameters = getParameters({
  files: {
    'package.json': {
      content: { dependencies: {
        '@primer/react': 'latest'
      } },
    },
  },
});

const url = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`;

However, figuring out what to put as the initial code in an index.ts file is a little more complicated. If we only have one link for playing with Primer at the top level we can put some generic boilerplate, but if we want to create a playground for each component or each example it gets a little more complicated, since it's difficult to get an actual compilable string representation of a specific Storybook story.

[patrickhlauke]

As I'll be embarking on a documentation project for primer docs shortly, I'd very much welcome any way that makes it easier to quickly test something out directly in a ready-made/configured environment, without the need for lots of development prior knowledge, having to run a local dev environment, or even having to manually configure my own codesandbox or similar.

[joshblack]

Hi @iansan5653! 👋 Definitely agreed that this would be incredibly helpful. We're going to take a look at this in a future mob programming session to try and chip away at this. Similarly, if the monorepo PR that we have up goes through I think we can also use the examples directory to generate codesandbox which will also be helpful.

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.