Skip to content

codesandbox/storybook-addon

Repository files navigation

Storybook CodeSandbox Addon

Storybook CodeSandbox Addon

Edit in CodeSandbox

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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published