Storybook works only without props

Get Help and Help Others
1

I’m very exited to see here that RedwoodJs supports Storybook.

I’ve never used Storybook before but am excited to start using that instead of my home-grown alternative to it.

I’m trying to follow guides at https://storybook.js.org/docs/react/writing-stories/args

I can’t seem to get it to work, though.

With a fresh new RedwoodJs project, I run:

yarn rw generate component Demo

And it works:
image

But then if I change the component and its story to:

/* eslint-disable react/react-in-jsx-scope */
const Demo = ({ middle }) => (
  <div className="demo">
    abc
    {middle}
    ghi
  </div>
);

export default Demo;

//----

/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable react/react-in-jsx-scope */
import Demo from './Demo';

const Template = (args) => <Demo {...args} />;

export const Main = Template.bind({});
Main.args = {
  middle: 'def',
};
console.log('Main.args', Main.args);

export default { title: 'Components/Demo' };

then I see:

image
image1218×682 43.6 KB

Notice “def” missing at the blue arrow.

I’ve tried stopping and rerunning yarn rw storybook. I’ve also tried running yarn rw dev simultaneously.

What am I doing wrong? Thanks, and Happy Holidays :smiley:

2

Actually, this works:

/* eslint-disable react/react-in-jsx-scope */
import Demo from './Demo';

export const Main = () => <Demo middle="def" />;

export default { title: 'Components/Demo' };

So really my only question is about why the args destructuring pattern below from the Storybook tutorial doesn’t seem to work, but that’s a question for a Storybook forum rather than here.

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

// Each story then reuses that template
export const Primary = Template.bind({});

Primary.args = {
  primary: true,
  label: 'Primary',
};