Is it possible to disable the new "Creating and editing stories from controls" feature?

[MichaelAllenWarner]

Summary

The new feature for creating and editing stories from controls is great, but with my (idiosyncratic) setup it doesn't work, and I'd like to disable it since it just gets in the way. Is there a way to prevent that "You modified this story..." popup from appearing altogether when I use the Controls?

Additional information

No response

Create a reproduction

No response

[olafurw]

I'm also looking for a way to turn this off. I just get errors in the terminal about Unexpected tokens (I'm using svelte stories)

SyntaxError: Unexpected token, expected "}" (5:13)
    at constructor (./node_modules/@babel/parser/lib/index.js:351:19)
    at TypeScriptParserMixin.raise (./node_modules/@babel/parser/lib/index.js:3233:19)
    at TypeScriptParserMixin.unexpected (./node_modules/@babel/parser/lib/index.js:3253:16)
    at TypeScriptParserMixin.expect (./node_modules/@babel/parser/lib/index.js:3557:28)
    at TypeScriptParserMixin.jsxParseExpressionContainer (./node_modules/@babel/parser/lib/index.js:6654:10)
    at TypeScriptParserMixin.jsxParseElementAt (./node_modules/@babel/parser/lib/index.js:6728:36)
    at TypeScriptParserMixin.jsxParseElement (./node_modules/@babel/parser/lib/index.js:6766:17)
    at TypeScriptParserMixin.parseExprAtom (./node_modules/@babel/parser/lib/index.js:6776:19)
    at TypeScriptParserMixin.parseExprSubscripts (./node_modules/@babel/parser/lib/index.js:10568:23)
    at TypeScriptParserMixin.parseUpdate (./node_modules/@babel/parser/lib/index.js:10551:21)

[shilman]

Sounds like a bug @valentinpalkovic

[emilioponce]

Same problem for us, I mean, we want to disable the [ + ] button next to the search bar, as we are not going to use this feature. But I was looking the docs and there's no reference about how to do it.

[blakezimmerman]

I'm not sure if there's an official way to disable the [ + ] button next to the search bar, but adding this to my manager-head.html got the job done:

<style type="text/css">
  /* Hide create story button next to the search bar */
  .search-field + div button {
    display: none !important;
  }
</style>

[rj-wowza]

What is the intended value for this feature anyway? What benefit is gained from making it easy to uninentionally overwrite a story file?

[shilman]

Is there a bug about overwriting story files? If so, can you please file an issue with more information?

[shilman]

Can you tell me more about your idiosyncratic setup and what specifically breaks?

I'm discussing providing a config option with the team to disable these new features

[MichaelAllenWarner]

@shilman

I just took a look, and I'm pretty sure the main problem on my end is related to Docker permissions, since I'm seeing this in my terminal:

storybook-1  | Error writing to ./components/Atom/Button/Button.stories.ts:
storybook-1  | Error: EROFS: read-only file system, open './components/Atom/Button/Button.stories.ts'

Aside from running Storybook in Docker, the main idiosyncrasy with my setup is that I make all my stories effectively async (via a global loader and some boilerplate in my .stories files), so that I can use an async template-rendering engine. Since the Docker business seems to be the problem at the moment, I don't know whether the new features play nice with the rest of my setup. That said, even if they do, I'd probably be inclined to turn them off; I use the Controls a lot during development for testing purposes, and I don't think I'd like to be prompted with a dialog every time.

[shilman]

@MichaelAllenWarner Thanks for letting me know, that sounds reasonable (and idiosyncratic).

Regarding being prompted with a dialog, it's more like a "bottom bar". It's designed to balance discoverability and unobtrusiveness. If you, or other folks here find it obtrusive, please let me know and I can pass that along to our designer.

[olafurw]

I do find it obtrusive. Our stories aren't edited that way but we do have a lot of controls configured so that people can play around with how things can work and the initial values are set and checked by chromatic for any visual differences. So when people start using the controls, this little popup thing always appears.

It also doesn't work (as per my comment above). I don't see why a flag to disable it wouldn't be ok. Probably a fine feature for those who like it.

[preflight]

One of the best features of Storybook is creating a sandbox where you can adjust props on-the-fly and see how the component changes.

When we use Controls to adjust props, we're not modifying the story - we're using Storybook to try out the component.

In my opinion, this feature ("You modified this story. Do you want to save your changes?") contradicts one of the main reasons for using Storybook.

[MWhite-22]

I posted in another discussion on this but essentially, we have over 100 developers and since upgrading to latest SB, this feature has caused an absolute explosion in "useless" stories that are nothing more than a tiny derivation change in another story (think every permutation possible of color/size/variant for a button).

We already have a "permutations" story that covers all possible options in a single story. We don't need a unique story for every possible change.

Outside of trying to encourage our developers to not actually click the "Save your changes" button, it would be a whole lot easier to just disable it.

[shilman]

We're adding the option. For anybody who wants to track the issue it's here #28377

[olafurw]

Thank you.

[certainlyakey]

Besides the questionable value as indicated by other commenters above, this feature generates broken and stylistically incorrect story code for us. We use wc-storybook-helpers to generate story templates dynamically (an excellent tool), and the feature doesn't add quotes around kebab-cased arg names:

export const Example: Story = {
  args: {
    disabled: false,
    icon-name: "tools-line", // <--- note `icon-name` is unquoted which causes an error
    label: "Side button", // <--- note the double quotes instead or single quotes that are used elsewhere
    class: "hydrated", // <--- note this guy. It's not a property or an arg, but it's appearing in the generated story
  },

  render: args => html`
    <div style="width: 100%; display: flex; justify-content: end;">
      ${template(args)}
    </div>
  `
};

It also always generates a render function instead of simply expanding the default story with ...Default which causes a lot of duplication.

Even if Storybook somehow manages someday to correctly follow a project's prettier config or something like this and become compatible with tools like wc-storybook-helpers - my point is, why would a tool like Storybook be used to actually author story code on its own? I'm very grateful for all the developments that allow us to write shorter code for stories (CSF3 etc), but authoring them, including following the coding conventions etc. should be the responsibility of component developers (library authors) and not of Storybook.