Storybook CodeSandbox Addon

The @codesandbox/storybook-addon is a Storybook addon that allows users accessing a story-book page to export the code from the story as a CodeSandbox Sandbox. Sandboxes will always be created within the same workspace providing a closed-circuit feedback system. The add-on also provides support for private dependencies.

Usage

Once configured, you can use the "Open in CodeSandbox" button within your Storybook environment to export stories to CodeSandbox effortlessly.

Configuration

// .storybook/main.js

module.exports = {
  // ...
  addons: ["@codesandbox/storybook-addon"],
};

Storybook configuration (required)

To run the addon, you'll need to configure it in your Storybook's .storybook/preview.js file.

// .storybook/preview.js

const preview: Preview = {
  parameters: {
    codesandbox: {
      /**
       * @required
       * Workspace API key from codesandbox.io/t/permissions.
       * This sandbox is created inside the given workspace
       * and can be shared with team members.
       */
      apiToken: "<api-token>",

      /**
       * @optional
       * If a given sandbox id is provided, all other options
       * will be ignored and the addon will open the sandbox.
       */
      sandboxId: "SANDBOX-ID",

      /**
       * @optional
       * Pass custom files/modules into the sandbox. These files
       * will be added to the file system of the sandbox and can 
       * be imported by other files
       */
      files: {
        // Example:
        "index.js": `
export const foo = () => console.log("Hello World");`
        "App.js": `
import { foo } from "./index.js"; 

foo();`,
      },

      /**
       * @optional
       * Template preset to be used in the sandbox. This will 
       * determine the initial setup of the sandbox, such as
       * bundler, dependencies, and files.
       */
      template: "react" | "angular", // Defaults to "react"

      /**
       * @optional
       * Dependencies list to be installed in the sandbox. 
       * 
       * @note You cannot use local modules or packages since
       * this story runs in an isolated environment (sandbox)
       * inside CodeSandbox. As such, the sandbox doesn't have
       * access to your file system.
       *
       * Example:
       */
      dependencies: {
        "@radix-ui/themes": "latest",
        "@myscope/mypackage": "1.0.0",
      },

      /**
       * @required
       * CodeSandbox will try to import all components by default from
       * the given package, in case `mapComponent` property is not provided.
       *
       * This property is useful when your components imports are predictable
       * and come from a single package and entry point.
       */
      fallbackImport: "@radix-ui/themes",

      /**
       * @optional
       * The default visibility of the new sandboxes inside the workspace.
       *
       * @note Use `private` if there is a private registry or private NPM
       * configured in your workspace.
       */
      privacy: "private" | "public",

      /**
       * @optional
       * All required providers to run the sandbox properly,
       * such as themes, i18n, store, and so on.
       *
       * @note Remember to use only the dependencies listed above.
       *
       * Example:
       */
      provider: `import { Theme } from "@radix-ui/themes";
        import '@radix-ui/themes/styles.css';

        export default ThemeProvider = ({ children }) => {
          return (
            <Theme>
              {children}
            </Theme>
          )
        }`,
    },
  },
};

export default preview;

Story configuration (recommended)

import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Button> = {
  title: "Example/Button",
  component: Button,
  parameters: {
    codesandbox: {
      /**
       * To import all components used within each story in
       * CodeSandbox, provide all necessary packages and modules.
       *
       * Given the following story:
       * ```js
       * import Provider from "@myscope/mypackage";
       * import { Button } from "@radix-ui/themes";
       * import "@radix-ui/themes/styles.css";
       * ```
       *
       * You need to map all imports to the following:
       */
      mapComponent: {
        // Example of default imports
        "@myscope/mypackage": "Provider",

        // Example of named functions
        "@radix-ui/themes": ["Button"],

        // Example of static imports
        "@radix-ui/themes/styles.css": true,
      },

      /**
       * @note You cannot use local modules or packages since
       * this story runs in an isolated environment (sandbox)
       * inside CodeSandbox. As such, the sandbox doesn't have
       * access to your file system.
       */
    },
  },
};

Make sure to provide the necessary values for apiToken and any additional dependencies or providers required for your specific setup.

For now, this addon only support [Component Story Format (CSF)](Component Story Format (CSF)) stories format.

Additional Notes

• Ensure that you have proper permissions and access rights to the CodeSandbox workspace specified in the configuration.
• Verify the correctness of the dependencies and providers listed in the configuration to ensure the sandbox runs smoothly.