How to add controls with storybook-addon-code-editor

[Heet-Bhalodiya]

I am currently in the process of implementing a storybook that features live code editing, utilizing a storybook-addon-code-editor. While I have successfully implemented the live code editor, I am now seeking to add controls to the storybook, which I am finding challenging.

To achieve this, I have developed a code snippet for a simple implementation with controls, which will receive controls from props. Please find the example code below:

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Primary = Template.bind({});

Primary.args = {
  variant: 'contained',
  children: 'Button',
};

Furthermore, here is the code for the live code editor that I have created:

export const EditableButton: ComponentStory<typeof Button> = createLiveEditStory({
  availableImports: { "@mui/material/Button": Button },
  code: ButtonSource,
  onCreateEditor(editor, monaco) {
    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
      noSemanticValidation: true,
    });
    monaco.editor.setTheme("vs-dark");
    editor.focus();
  },
});

Here is the ButtonSource code:

import Button  from "@mui/material/Button";

const props: React.ComponentProps<typeof Button> = {
  children: "I'm not orange",
  variant: "contained"
};

const ButtonSource = () => <Button {...props} />;

export default ButtonSource;

Ideally, I would like to merge these two code snippets into a single block of TypeScript code so that controls and live code editing can be done in the same story.

[JeremyRH]

Thanks for the feedback. I added support for Story.args. The component exported from the live editor now has props that match Story.args. See the story defined here and the story source here.

[Heet-Bhalodiya]

Hello @JeremyRH,

Thank you so much for the quick solution. It works perfectly in a Next.js project.

However, I have attempted to apply the same solution in a Vite.js project, but it has failed to work. I have tested versions 1.0.1 and 1.1.0, but unfortunately, neither of them has been successful in Vite.

I have attempted to install the project from the official react site. React official website does not suggest using CRA but instead recommends using Next.js & some other frameworks. So I started a new project in Next.js and all the latest versions of this addon work completely fine.

I have included the code for my main.cjs file below :

module.exports = {
  "stories": [
    "../src/storybook/**/*.stories.mdx",
    "../src/storybook/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    {
      name: '@storybook/addon-essentials',
      options: {
        actions: false,
      },
    },
    'storybook-addon-code-editor',
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-vite"
  }
}

In version 0.3.7, commenting out the core object from the main.cjs file solves the problem. However, in versions 1.0.1 and 1.1.0, commenting out the following code does not solve the issue:

 "core": {
    "builder": "@storybook/builder-vite"
  }

I hope you find a solution to this as quickly as you gave in the previous reply.

[JeremyRH]

I tried to make vite to work with the monaco loader but failed so vite is not supported at this time. As of now, Storybook uses Webpack 4 by default and 0.3.7 did work with Webpack 4. In version 1.0.0 I updated storybook-addon-code-editor to support Webpack 5 and broke support for Webpack 4 (sorry).

Can you try core: { builder: 'webpack5' }? See here to set up Storybook with Webpack 5.

[Heet-Bhalodiya]

Hello @JeremyRH,

Thank you so much for the quick solution. It works perfectly in a Next.js project but in a vite project, it doesn't work after the 0.3.7 version as you mentioned.

I have also tried the solution you provided core: { builder: 'webpack5' } but it doesn't work in vite.

I would like to inquire if there are any plans to make this addon compatible with a vite project in the future because we are unable to offer a live code editor to our vite customers without this compatibility.

[JeremyRH]

There is probably a way to make it work with vite but have not found a solution yet. I might make the monaco loader configurable so you can provide a function that loads monaco. This would allow you to make it work with vite.

[JeremyRH]

@Heet-Bhalodiya

With the latest version (2.0.1), you should be able to use vite with storybook-addon-code-editor. See breaking changes here. Let me know if you run into any issues.

[Heet-Bhalodiya]

Hello @JeremyRH.

Thank you so much for the quick reply and perfect solution.

I have tried the solution and it works completely fine without adding any webpacks in Vite. Now it completely works in Next.js, CRA and Vite.