Addon-controls: Add include/exclude configuration options

[yannbf]

Issue: #11638

What I did

This PR adds the ability to hide/show controls by using include or exclude configuration:

ArrayInclude = Template.bind({})
ArrayInclude.parameters = { controls: { include: ['foo', 'bar'] } };

RegexInclude = Template.bind({})
RegexInclude.parameters = { controls: { include: /^hello*/ } };

ArrayExclude = Template.bind({})
ArrayExclude.parameters = { controls: { exclude: ['foo', 'bar'] } };

RegexExclude = Template.bind({})
RegexExclude.parameters = { controls: { exclude: /^hello*/ } };

How to test

1 - checkout the branch
2 - yarn bootstrap
3 - run yarn start
4 - play around with examples/official-storybook/stories/addon-controls.stories.tsx

[shilman]

LGTM!

[KenACollins]

Hi, This code fix does not work for me. The merged code only references TypeScript files. Is there a separate solution for those of us using React PropTypes or am I mistaken and this pull request is meant to satisfy all developers?

I updated both of the following add-on packages to the latest version 6.1.21:

npm update @storybook/addon-essentials @storybook/addons

Since @storybook/addon-essentials includes @storybook/addon-controls, I presume I only need to update the former and never need to install the latter.

The fix did not work so I also updated Storybook React to 6.1.21:

npm update @storybook/react

Still no luck. Here is my situation...

My functional component defines 11 prop types, my story only has args defining two properties, and all 11 show up on the Controls panel despite my attempts to exclude some with the solution described above. Below is a snippet from my story.

const Template = (args) => <Button {...args} />;
export const ExampleTwo = Template.bind({});

ExampleTwo.story = {
    args: {
        color: 'primary',
        children: 'Active Function!',
    },
    parameters: {
        controls: { exclude: ['children', 'className', 'dataSelenium'] },
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/XXXXXXXXXX',
        },
    },
};

Above, I only specify args for 2 out of 11 properties, color and children, and I attempt to exclude one of these (children) while also attempting to exclude two others (className, dataSelenium) from the larger group off 11 prop types. But the end result is that all 11 show up on both the Controls panel and the Docs tab.

[shilman]

@KenACollins what happens when you run

npx sb@next upgrade --prerelease 

[KenACollins]

@shilman, Oh, this is beta code? I thought it was included in 6.1.21. That was the impression I got when I viewed the @storybook/addon-essentials package at npmjs.com and it specified 102 pull requests, and I found this PR# 13898 in the list. I must have drawn the wrong conclusion.

Okay, I ran your pre-release command and after it finished, I did confirm that the filtering of controls properties described by this PR does in fact work. But it has broken a lot of other things I had working.

For starters, the inclusion of comments and default values that were appearing on the Controls panel in the Description and Default columns have gone missing. Also, a bunch of my other stories are now breaking with errors. Here is one: "Check the render method of unboundStoryFn." This is not a flaw in my code. Is there an easy command to restore my earlier environment or do I need to manually edit the version of every Storybook package in package.json and attempt a npm install command? Ugh.

[shilman]

@KenACollins You'll need to edit your package.json and re-install. Or you if you're using git you could revert.

6.2 is supposed to only contain non-breaking changes. If you're seeing things break, I'd love to know the details so we can fix them before release. Do you have a repro repo you can share?

[KenACollins]

@shilman, My code uses is not in a GitHub repo I can share. Is it off topic to provide details here, in this thread for PR# 13898?

I am attaching two screen shots. I got 9 errors after the 6.2.0-BETA install, 7 of them are the same, about an invalid element type referring to unboundStoryfn and 2 of the errors are in reference to undefined displayName.

I'll wait until tomorrow to revert back to the stable 6.1.x versions I had of the Storybook packages unless I hear back from you to wait on a new fix.

Thanks,
Ken

[shilman]

@KenACollins are you positive you didn't change anything in your code and it was working properly in 6.1? that looks suspicious to me.

[KenACollins]

Yes, @shilman, I am positive.

I was singularly focused on this PR and the only changes I made today were to 1) add the controls exclude object to my functional component's story.parameters object as described in this PR, and 2) update/upgrade the Storybook packages as previously described.

I only made the change to my functional component because as I referenced above in my response to @jonniebigodes, the 11 properties only show up for the story based on the functional component, not the class-based one. So while I can create a story for a class component, I can't get it to show all the proptypes so for the time being I am using the function version of the same component. This is not really a solution, just a workaround for now. Ultimately, I would like the same result regardless of component type (function or class).

[shilman]

@KenACollins are you using yarn or npm? can you see whether there are any older versions of storybook packages installed?

[KenACollins]

Hi Mike @shilman, I use npm or npx. I tried to like yarn but got too frustrated.

How would older versions of Storybook packages be installed? That npx upgrade command you provided did the trick of upgrading every single Storybook package to 6.2.0 BETA, except the one for the designs add-on which got upgraded to 6.0.0 ALPHA.

[shilman]

@KenACollins yarn and npm are much buggier than you'd ever expect for tools that power the entire frontend ecosystem. a surprising number of storybook issues have been resolved by the following snippet:

Did you try removing node_modules and/or lockfiles and reinstalling?

In your case, I'd recommend first removing the designs addon and then potentially removing node_modules and or lockfiles. I'm reasonably confident the errors you're seeing are due to something weird going on on your machine and not due to a problem with Storybook 6.2-beta. (Famous last words.)

[KenACollins]

Hi Mike @shilman,

Your instincts proved correct. A fresh install, absent the designs add-on on that 6.0.0-ALPHA version, resolved everything. Details below.

First, I tried just uninstalling the storybook-addon-designs at version 6.0.0-alpha.3 with:

npm uninstall storybook-addon-designs

It took awhile to finish but when it did, the designs add-on was still present in package.json. I then deleted the line...

"storybook-addon-designs": "^6.0.0-alpha.3"

...in package.json and I took the more extreme approach you suggested and deleted the node_modules folder and the two lock files, package-lock.json and yarn.lock, and then reinstalled everything:

npm install

When it finished, I just had to comment out all uses of the designs add-on in my stories and the app started up fine. The displayName errors did in fact turn out to be my fault -- I had decided to export Button with the default keyword and this meant a change to the way I imported this component in my stories.

Now, the only outstanding issue is that Storybook is treating class components differently from function components. I guess I should open a new thread to discuss this outside of this pull request, right?

UPDATE: Actually, I realized that the original posting I created, 14133 contains my issues with how Storybook treats functions vs. classes, so I will pick up the discussion there.